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

【问题标题】：Image and text with opacity background in the same DIV同一DIV中具有不透明背景的图像和文本
【发布时间】：2012-06-30 21:34:20
【问题描述】：

我正在尝试制作具有不透明度的图像和文本！

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

请看图片：

【问题讨论】：

使用 relative 位置到 wrapper div 和 absolute 位置为子 (img, div 和 text)
问了 4 个问题，0 个接受了？？

标签： css html background opacity

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你应该做的第一件事是编写 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
}

【讨论】：

【解决方案3】：

/* 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 版本不完全支持它，所以目前唯一完全跨浏览器的方法是使用透明图像作为背景。

【讨论】：

【解决方案4】：

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

【讨论】：

还有没有办法让span自动和图片一样宽？
有！您需要使用 jquery 来计算图像宽度并将其应用于 span
@Dipaks 你不需要 JQuery - 只需将 right: 0 添加到你的 span CSS
@MyHeadHurts 请张贴小提琴 - jsfiddle.net。让我看看这怎么可能用 right: 0; '还有一种方法可以自动使跨度与图像的宽度相同吗？ '
@Myheadhurts 立即检查 - jsfiddle.net/dipaks2011/fbAed/1 你可以称之为通过使 DIV 内联块工作的技巧:)