0

对不起，可能是我的语气不好，

问题：

我正在使用这样的不透明背景的 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 问题。

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

但我没有得到解决方案。

4

2 回答 2

0

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

尝试

.opecity:after {
    content:'Hello';
}
于 2013-08-30T13:16:07.340 回答
0
  • 第一行，你已经opecity {并且你应该使用.opecity，因为它是一个类。
  • 将Content分离出来放在自己的.classs {}

IE：

.example-image-link:hover:after {
 content:'Hello';
}
  • 如果您在图像类之前或之后使用它，它将不起作用（试试这个）

<\div class="opecity">

<\a class="example-image-link" href="img/port1.png" data-lightbox="example-1"> <\img class="example-image" src="http://humor. desvariandoando.com/wp-content/uploads/susto.jpg" alt="thumb-1" width="250" height="220"/> </div>

.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/

于 2013-08-30T13:48:22.923 回答