css - 同一DIV中具有不透明背景的图像和文本

Question

我正在尝试制作不透明的图像和文字！

背景出现在同一个 div 中，而不使用图像作为背景。我怎样才能使这项工作？

请看图片：

Answer 1

<div>
  <span>Title</span>
  <img src="" />
</div>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}

Answer 2

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);

对于 rgba，最后一个字段是不透明度。但在一些较旧的 IE 版本中并不完全支持它，因此目前唯一完全跨浏览器的方法是使用透明图像作为背景。

Answer 3

您应该做的第一件事是编写 HTML：

<figure>
    <img src="/image.jpg">
    <figcaption>Title</figcaption>
</figure>

之后您只需要编写 CSS: 示例：

figure {
  position: relative;
}
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.3); // or transparent gif
}

Answer 4

当您书写时background-color:rgba(0,0,0,50);，背景将是黑色和半透明的。

它不会影响文本的透明度，因为要设置文本的透明度，color:rgba(255,255,255,50);如果你不写，文本不会是半透明的。