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

Be so kind as to look at this theme here。看看那些人的脸在脸上，褪色，在'用这几个简单的点击'文字创建一个漂亮的横幅。 这个效果可以通过多个img标签来实现吗？多个imgs可以形成图像背景吗？

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

所以，我可以做到完全相同的效果，但通过多个img标签？什么东西可以在IE 7,8,9上运行？可能与z-index有关吗？

来源

2014-02-27 Starkers

'img'元素通常做出错误选择的“背景”。考虑简单地对多个（非图像）元素进行分层，比如堆叠的div，将*前景内容放在它们上面，然后使用CSS背景属性和适当的偏移量。我不知道过时的渲染引擎需要什么游戏。 – user2864740

只需使用多个图像标记与CSS的opacity来做到这一点。事情是这样的：

HTML

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

CSS

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

http://jsfiddle.net/6Y5Qg/

您可能需要使用some tricks对于旧版本的IE，但所有现代浏览器都支持这个就好了。

来源

2014-02-27 23:55:08

不完全相同，文本需要在其上方显示，如主题森林示例中所示。http://jsfiddle.net/6Y5Qg/1/ – Starkers

然后，您将需要使用'z-index'和绝对定位来做到这一点。看到这里：http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css –

从性能角度来看，我会考虑预先生成面部背景图像服务器。发送很多请求会花费你的时间。特别是如果你保持活着是禁用的。 – czerasz

堆叠的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>

来源

2014-02-28 01:22:29 petebolduc

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

回答

相关问题