Question

我有div，我想给它3个背景。左右背景图像是透明的，但因为我的中心背景图像为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;
}

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>中的内容不重叠。

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

1 个答案: