鉻 - CSS - 背景尺寸重疊

遇到麻煩重疊背景圖像是這樣的：鉻 - CSS - 背景尺寸重疊

div.test{ 
 
    position:relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: red 
 
} 
 

 
div.container{ 
 
    height: 480px; 
 
    width: 150px; 
 
    
 
} 
 

 
div.test:before, div.test:after{ 
 
     content: ""; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
div.test:before{ 
 
     background-image: linear-gradient(to bottom, #E5E5E5 1px, transparent 1px); 
 
    background-size: 100% 15.0px; 
 
} 
 

 
div.test:after{ 
 
     background-image: linear-gradient(to bottom, blue 1px, transparent 1px); 
 
    background-size: 100% 60px; 
 
}

<div class="container"> 
 
    <div class="test"> 
 

 
    </div> 
 
</div>

我想要重疊的4第n條，但我不明白爲什麼它不起作用。條紋在每次重複時會變得更加分離。如果「before」僞元素每15px重複一次，如果高度恰好爲60px，那麼不應該將「after」僞元素放置在第4個條紋上？

編輯：只注意到這只是發生在Chrome：

這是火狐：

來源

2017-05-08 BizTuk

我看不出有什麼問題，在您的代碼，除非你正在使用的「之前」和「之後」相同的顏色，所以說是「隱形」的眼睛，我已經改變它在這個小提琴中更加明顯https://jsfiddle.net/351wpfgx/ – am05mhz

我添加了一個Chrome渲染的圖像，你可以看到藍色的eline沒有排成白色。它在Firefox中工作正常 – BizTuk

您的問題中的堆棧代碼段是否爲您呈現相同的方式？它也不適合我。事實上，在任何瀏覽器中我都沒有看到任何藍色。 – BoltClock

我不明白這一點，顯示條，只要你想（要檢查它，我只更新了條形顏色）。問題是什麼？

div.test{ 
 
    position:relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: red 
 
} 
 

 
div.container{ 
 
    height: 480px; 
 
    width: 150px; 
 
    
 
} 
 

 
div.test:before, div.test:after{ 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
div.test:before{ 
 
     background-image: linear-gradient(to bottom, #E5E5E5 1px, transparent 1px); 
 
    background-size: 100% 15.0px; 
 
} 
 

 
div.test:after{ 
 
     background-image: linear-gradient(to bottom, #007ac2 1px, transparent 1px); 
 
    background-size: 100% 60px; 
 
}

<div class="container"> 
 
    <div class="test"> 
 

 
    </div> 
 
</div>

來源

2017-05-08 10:47:00

我編輯了我的帖子，其中包含Chrome和Firefox中呈現的內容的圖片，顯然由於某種原因，它不適用於Chrome。 – BizTuk

@BizTuk，我只在鉻中運行此代碼段...工作正常.. –

鉻 - CSS - 背景尺寸重疊

回答

相關問題