Question

我想在标题文本后面添加标题文本，类似于下面的图片。

https://www.dropbox.com/s/f66x0txr37klbe0/example.png?dl=0

我认为可能在第一个标头上使用相对位置会允许它，但由于没有出现任何内容，我认为这样做不正确。

有人可以帮助我实现这些代码吗？

Answer 1

这是一个使用css no z-index的工作示例。使用元素创建顺序，您可以选择最上面的一个。

<div>
<h1 class="h1-back">
World!
</h1>
<h1 class="h1-front">
Hello!
</h1>
</div>

这是您的CSS

div {
  display:inline-block;
}
.h1-back {
  position:absolute;
  top:0;
  left:0;
  color:red;
  opacity:0.5;
  transform: rotate(-20deg);
}

.h1-front {
  position:absolute;
  top:0;
  left:0;
  color:blue;
}

Answer 2

您必须绝对定位第二个标题（或任何其他元素）。

将左上角放在中间，然后用Rails 5.2.2固定位置：

transform: translate()

不要忘记该元素需要一个以position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%) rotate(-12deg);作为参考点的父元素。

position: relative

.hero-section {
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20vh;
  background-color: rgba(0,0,0,0.1);
  margin: 0 0 2rem 0;
  padding: 1rem;
}

.another-hero-section {
  position:relative
  background-color: rgba(0,0,0,0.1);
  margin: 0 0 1rem 0;
  padding: 1rem;
}


.special-heading {
  font-family: 'Amatic SC', cursive;
  font-size: 5rem;
  position: relative;
  line-height: 1;
  color: #333;
  margin: 0;
}

.special-heading span {
  font-family: 'Caveat Brush', cursive;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) rotate(-12deg);
  color: #127b9b;
  text-shadow: 10px 12px 11px #000000cf;
  font-size: 6rem;
}

.special-heading-foreground {
  font-family: 'Caveat Brush', cursive;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(12deg);
  color: #749b12;
  text-shadow: 10px 12px 11px #000000cf;
  font-size: 6rem;
  margin: 0;
  line-height 1;
}

Answer 3

使用设置为position: relative的容器，然后使用position: absolute将标题放在其中（并考虑将CSS移至专用样式表）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            position: relative;
            height: 200px;
            width: 200px;
        }

        .container h3 {
            float: left;
            clear: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .container h3.behind {
            z-index: -1;
            color: rgba(0,0,0,0.7);
            font-size: 30px;
            top: 20%;
            transform: translate(-50%, -50%) rotate(-20deg);
        }
    </style>
</head>
<body>
<div class="container">
    <h3 class="behind">Test Behind</h3>
    <h3>Test</h3>
</div>
</body>
</html>

Answer 4

方法1

<div class="main">
<img src="img.jpg">
<h1>Title</h1>
</div>

.main{
position:relative
}
.main img{
position:absolute;
z-index:1;
}
.main h1{
position:absolute;
z-index:2;
}

方式2：

<div class="main">
    <h1>Title</h1>
    </div>

.main{
background-image:url('path/to/img.jpg');
background-position:center;
background-repeat:no-repeat;
}

如何将标题文字放在另一个标题后面？（见图片）

4 个答案:

如何将标题文字放在另一个标题后面？ （见图片）

4 个答案:

如何将标题文字放在另一个标题后面？（见图片）