Question

Be so kind as to look at this theme here。看看页脚中的那些人脸，褪色，在“用一些简单的点击”文字创建这样一个漂亮的横幅后面。 使用多个img标签可以实现此效果吗？

现在，他们这样做的方式很简单。他们确实有一张所有裁剪面部的图像，他们在photoshop中设置为20％的不透明度，并简单地将其设置为div的背景图像。我想做同样的效果，但是使用数据库派生的图像，所以这种方法对我来说毫无用处。

我可以通过多个img标签完成相同的效果吗？在IE 7,8,9中可以使用的东西？或许与z-index有关？

Answer 1

只需使用CSS opacity的多个图片代码即可。像这样：

HTML

<img src="..." />
<img src="..." />
...

CSS

img {
  opacity: 0.5;
  vertical-align: middle;
}

http://jsfiddle.net/6Y5Qg/

对于旧版本的IE，您可能必须使用some tricks，但所有现代浏览器都会支持此功能。

Answer 2

堆叠div是最简单的......这里和示例：

<style>

#wrap {}

#imgWrap {
    padding: 0;
    overflow: hidden;
    height: 200px;
    width: 500px;
    z-index:1;

}

#imgWrap img {
    float: left;
    }

#container {
    color: white;
    margin-top: -200px; 
    width: 500px; 
    height: 200px; 
    z-index: 20;
    background-color: black}

#container h1 {
    margin: 0;
    color: white; 
    padding-top: 50px;
    text-align: center;
    opacity: 1;
}

</style>

<div id="wrap">
    <div id="imgWrap">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
        <img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
    </div>

    <div id="container">
        <h1>TEST</h1>
    </div>

</div>

多个imgs可以形成图像背景吗？

2 个答案: