Question

我在下面的图片中运行了这个例子，这是在Flash中完成的，我想知道是否有类似的影响，在图像底部有一个带有文本的透明框可以用CSS或其他闪光灯？

_{（来源：ajaxline.com）}

Answer 1

当然，这是一种跨浏览器的方式：

<html>
  <head>
    <style type="text/css">
      div.imageSub { position: relative; }
      div.imageSub img { z-index: 1; }
      div.imageSub div {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        padding: 4px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        overflow: hidden;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      div.imageSub div.label {
        z-index: 3;
        color: white;
      }
    </style>
  </head>
    <body>
      <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
        <img src="image.jpg" alt="Something" />
        <div class="blackbg"></div>
        <div class="label">Label Goes Here</div>
      </div>
    </body>
</html>

此方法不需要JavaScript，不会导致在IE中丢失ClearType文本，并且与Firefox，Safari，Opera，IE6,7,8兼容......不幸的是，它只适用于一行文本。如果您想要多行，请调整div.imageSub div的{{1}}和height属性，或使用以下内容（修改CSS并要求指定标签两次）。

line-height

Answer 2

当然。

<div style="background-image: url(image.png);" >

  <div style="position:relative; top:20px; left:20px;">
    Some text here
  </div>
</div>

Answer 3

<html>
    <body>
        <div style="position: absolute; border: solid 1px red">
            <img src="http://www.ajaxline.com/files/imgloop.png"/>
            <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
            <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
                Hello
            </div>
         </div>
    </body>
</html>

Answer 4

您可以通过CSS仅在任何图像上创建覆盖图。

.container{
  width:250px; height:250px;
}
.container img{width:100%;height:100%}
.container::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  z-index:9999;
  width:100%;
  height:100%;
  opacity:0;
}

<div class="container">
<img src="https://cdn4.buysellads.net/uu/1/8026/1535654409-Slack-pink_logo.png" alt="" border="0">
</div>

可以在图像上叠加透明div

4 个答案: