在同一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);如果你不写，那么文本将不是半透明的。