有什么方法可以在 section
和文本之间获取图像吗?所以我想在最低层为 section
设置背景,然后是图像,然后是覆盖图像的文本。我试着弄乱 z-index
但我无法让它工作。如果我取出 section
及其背景,it works as it should .但是 section
标签必须作为该部分的背景。
fiddle :http://jsfiddle.net/y9ywL1gx/1/
HTML
<section>
<div class="block">
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<img src="http://img2.tvtome.com/i/u/ac51b5ad45b24475c4667f74aefdc9a5.png">
</div>
</section>
CSS
section {
background: url("http://subtlepatterns.com/patterns/symphony.png") repeat;
}
div.block {
position: relative;
}
img {
position: absolute;
top: 0;
z-index: -1;
}
澄清一下,现在是:南方公园图像 --> 部分背景 --> 文本
。我希望它是:section background --> south park image --> text
最佳答案
我认为这就是您想要的:http://jsfiddle.net/y9ywL1gx/5/
尝试重新排序元素而不是使用 z-index
。
关于css - 带有背景图像的 div 内的文本叠加图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27339454/