html - 元素上的宽度和z-index

我只是在玩着陆页。

我只是在“文本吸引人的片段”上设置了不透明的红色背景。


如何以正确的方式设置宽度，因此我还牢记响应部分？
我怎样才能在前面得到字体，在后面得到红色背景？

    #cathyText {
        background-color: red;
        padding: 10px;
        opacity: 0.1;
    }

     <h2 class="text-center" id="cathyText">A CATCHY PIECE OF TEXT</h2>

最佳答案

我怎样才能在前面得到字体，在后面得到红色背景？


使用rgba()：

#cathyText {
    padding: 10px;
    background: rgba(255,0,0,0.3);
    z-index: 1;
}

它起作用的原因是前3个数字设置了颜色的红-绿-蓝色，最后一个设置了不透明度。

如果要使<h2>元素居中，一种方法是将其放在包装中并将显示更改为inline-block：

#cathyText {
    background-color: red;
    padding: 10px;
    background: rgba(255,0,0,0.3);
    width:200px;
    display:inline-block;
}

.catchy-text-wrapper {
  width:100%;
  text-align:center;
}

 <div class="catchy-text-wrapper">
 <h2 class="text-center" id="cathyText">A CATCY PEICE OF TEXT</h2>
 </div>