Question

抱歉，可能是我的语气不好，

问题：

我正在使用不透明背景的CSS3代码

修改（添加代码）

CSS：

opecity {
   opacity:.75; 
   content:('Hello');
   background:#111 url(../img/view.png) no-repeat center;
} 
.opecity img:hover{
   -moz-opacity: 0.10;
  opacity: 0.10;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
   background:#000;
}

HTML：

<div class="opecity">
  <a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
     <img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
  </a>
</div>

此代码仅显示图像，但不显示内容“Hello”。但我想同时显示图像和内容。我也关心这个 Stackoweflow.com问题。

Image and text with opacity background in the same DIV

但我没有得到解决方案。

Answer 1

来自W3Schools：“content属性与：before和：after伪元素一起使用，以插入生成的内容。”

尝试

.opecity:after {
    content:'Hello';
}

Answer 2

第一行，你opecity {，你应该使用.opecity，因为它是一个类。
将内容分开并将其放在自己的.classs {}

I.E：

.example-image-link:hover:after {
 content:'Hello';
}

如果您在图像课程之前或之后使用它（试试这个）

＆lt; \ div class =“opecity”＆gt;

＆lt; \ a class =“example-image-link”href =“img / port1.png”   数据收藏夹= “示例-1” ＆GT; ＆lt; \ img class =“example-image”   SRC = “http://humor.desvariandoando.com/wp-content/uploads/susto.jpg”   alt =“thumb-1”width =“250”height =“220”/＆gt; ＆LT; / DIV＆GT;

.example-image-link：hover：after {content：'Hello'; }

删除\并更改.example-image-link:hover:after

的img:hover:after

您发布的链接使用了其他方法：

试试这个：

<!DOCTYPE html>
<html>
<body>
<style>

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

<div>
  <span>Title</span>
  <img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>

</body>
</html>

（我从你的链接中取出）

你可以在这里测试所有的html和css：http://jsfiddle.net/

同时显示文字和图像：背景的不透明度

2 个答案: