图像和文字在同一个DIV不透明的背景 [英] Image and text with opacity background in the same DIV

问题描述

我试图使图像和文字与不透明！

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

请参见图片：

解决方案

 ＆LT; D​​IV＆GT;
  ＆LT;跨度＆GT;标题＆LT; / SPAN＆GT;
  ＆所述; IMG SRC =/＆GT;
＆LT; / DIV＆GT;DIV {
  位置：相对;
}
跨度{
  背景：RGBA（0,0,0,0.5）;
  位置：绝对的;
  底部：0;
  左：0;
  填充：6像素;
  显示：块;
}
 

I'm trying to make an image and text with an opacity!

Background appear in the same div without using the image as background. How can I make this work?

Kindly see image:

解决方案

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

这篇关于图像和文字在同一个DIV不透明的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！