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

集中项目的想法，你需要用div作为父项包装它，并将text-align: center;添加到div，因此你的孩子居中。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

只需在你的CSS中使用.thirdhead类。如果将它放在.hero-text类之后，它将基本上覆盖用于.hero-text的css。只需像这样构建它：

.hero-text {
   ...
}

.thirdhead{
   ...
}

.thirdhead将处理该特定元素，而.hero-text将处理另外两个元素。

英雄图像文本属性

3 个答案: