元素上的寬度和z-index

Question

我只是在玩着陸頁。

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

• 如何以正確的方式設置寬度，因此我還牢記響應部分？
• 如何在前面得到字體，在后面得到紅色背景？

  #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個數字設置了顏色的紅綠藍，而后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>