Question

我只是在着陆页上玩一点。

我只是在“A CATCHY PIECE OF TEXT”上设置了红色不透明背景。

如何以正确的方式设置宽度，所以我还要考虑响应部分？
如何获得前面的字体和后面的红色背景？

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

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

Answer 1

使用rgba()作为背景颜色

#cathyText {
    background-color: rgba(255,0,0,.1);
    padding: 10px;
    /* opacity: 0.1; */
    z-index: auto;
}

Answer 2

如何获得前面的字体和后面的红色背景？

使用rgba()：

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

元素和z-index的宽度

2 个答案: