防止透明背景与不透明背景重叠

Question

我有一个 div，我想给它三个背景。左右的背景图是透明的，但因为我的中心背景图是repeat-x，所以中心背景会出现在左右背景下面。有没有办法停止这种情况发生？

div {
    background: url('images/left_nav_bg.png'), 
                url('images/right_nav_bg.png'),
                url('images/center_nav_bg.png');

    background-repeat: no-repeat,no-repeat,repeat-x;
    background-position: left,right;
}

- irfan

---

请解释一下你想要实现什么。将 left_nav_bg.png 和 right_nav_bg.png 设为不透明的背景是否能解决你的问题？ - Gyrocode.com

你是否事先知道左右背景图像的宽度？ - Stephan Muller

Answer 1

如果您只想在某些点之间显示中心背景，则必须给它一个起始和停止偏移量，而目前您只能设置其中之一。恐怕您必须使用伪元素来处理中心图像：

div {
    background: url(http://placekitten.com/45/300),
                url(http://placekitten.com/37/300);
    background-repeat: no-repeat;
    background-position: left, right;
    
    height: 300px;
    position: relative;
    width: 300px;
}

div:before {
    background: url(http://placekitten.com/17/300) top left repeat-x;
    content: ' ';
    display: block;
    height: 100%;
    left: 45px;
    position: absolute;
    right: 37px;
    z-index: -1
}

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

left 和 right 属性将中心背景定位，以避免与其他两个重叠。

position: absolute 和 z-index: -1 确保中心图像不会与 <div> 中的内容重叠。

- Stephan Muller