如何使这个黑色报价背景透明？哇你的观众写得更大？

Question

嗨，我想让报价框透明，文字大小更大。

原始代码如下。

 <div class="quote"><h1>WOW YOUR AUDIENCE<br></h1><hr style="margin: 0 20%;">

Answer 1

你还没有提到你需要多少透明度和字体大小，所以我随机抽取了它。你也错过了关闭div标签。这是代码：

<div class="quote" style="opacity:0.5"><h1 style="font-size:50px">WOW YOUR AUDIENCE<br></h1></div><hr style="margin: 0 20%;">

您已要求使完整的报价框透明，而不仅仅是它的背景颜色（白色!!）。希望这是你需要的。

Answer 2

为了实现这一点而不影响文本的透明度，同时使围绕它的background-color的div透明，使用rgba颜色而不是opacity

前3个值是红色，绿色蓝色等级，第4个数字是0-1等级的透明度。

在css here中了解有关rgba的更多信息。

要增加任何字体的大小，可以使用font-size。我在这个例子中使用了em，因为它是相对于屏幕尺寸的，但你可以使用任何CSS measurement units。

.quote {
  background: rgba(200, 54, 54, 0.5);
  z-index: 22;
}

h1 { font-size: 6em; }

.example {
  position: absolute;
  background-color: blue;
  top: 10px;
  left: 80%;
  height: 200px;
  width: 50px;
  z-index: -1;
}

<div class="quote"><h1>WOW YOUR AUDIENCE<br></h1><hr style="margin: 0 20%;"></div>
<div class="example"></div>

要将透明度应用于div中的所有元素或元素本身，您可以简单地使用0-1范围内的opacity样式，如下所示：opacity: 0.7;