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

我有一个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; 
}

来源

2015-04-28 irfan

请解释你想达到什么。在'left_nav_bg.png'和'right_nav_bg.png'中制作不透明的背景会解决你的问题吗？ –

你知道左边和右边的背景图像有多宽吗？ –

要仅显示某些点之间的中心背景，您必须给它一个开始和一个停止偏移量，此时您只能设置其中一个。恐怕你必须与为中心图像的伪元素的工作：

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

来源

2015-04-29 07:10:10

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

回答

相关问题