Hero-image文本属性

Question

我正在创建一个带有英雄形象的网站。我已经将CSS中的文本设置为居中。我想在图像中创建另一段文本。然而，这一次，在左下角。我已经将额外的文本添加到div中，但它当然只是获取我在CSS (中心)中设置的信息。有没有办法在CSS中为这段新的文本创建另一个标记，以便我可以根据自己的选择设置属性？

这是我的html

<div class="hero-image">
     <div class="hero-text">
        <p class="firsthead">test 1</p> <!--The centre text-->
        <p class="secondhead">test 2</p> <!--The centre text-->
        <p class="thirdhead">test 2</p> <!--The part I want to change-->
     </div>
  </div>

这是我的CSS

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

我是网站编码的新手，所以我很感谢你的帮助。我就是想不通。

谢谢。

Answer 1

因此，如果我理解正确的话，您只是希望能够在thirdhead <div>上设置更多/不同的规则。对吗？如果是这样的话，你可以添加一个新的CSS块：

.thirdhead {
   ...
}

如果要覆盖.hero-text块中以前的样式，则需要在后面添加新的.thirdhead块。在CSS中，靠近页面末尾的样式优先。

Answer 2

集中项目的想法是，您需要将其包装为父目录，并将text-align: center;添加到div中，因此您的子目录处于中心位置。

​

.hero-image {
    background-image: url(http://via.placeholder.com/1000x600);
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: black;
}

.firsthead {
    text-align: center;
    font-family: century gothic;
    font-size: 60px;
    color: #D2691E;
    cursor: default;
}
 
.secondhead {
    text-align: center;
    font-family: century gothic;
    font-size: 25px;
    color: #FFF;
    cursor: default;
}
 
.thirdhead {
    font-family: century gothic;
    font-size: 25px;
    color: #FFF;
    cursor: default;
    position: absolute;
    bottom: 0;
}

<div class="hero-image">
  <div class="hero-text">
    <div class="firsthead"><p>test 1</p></div>
    <!--The centre text-->
    <div class="secondhead"><p>test 2</p></div>
    <!--The centre text-->
    <p class="thirdhead">test 3</p>
    <!--The part I want to change-->
  </div>
</div>

​

Answer 3

只需在css中使用类.thirdhead即可。如果您将它放在.hero-text类之后，它实际上将覆盖用于.hero-text的css。只需像这样构造它：

.hero-text {
   ...
}

.thirdhead{
   ...
}

.thirdhead将处理该特定元素，而.hero-text则定位其他两个元素。