防止透明背景與不透明背景重疊

我有一個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

防止透明背景與不透明背景重疊

回答

相關問題