線性漸變影響背景大小：覆蓋

我發佈的代碼是做我想做的，但我想要從CSS中刪除linear-gradient。問題是，當我把它拿出來，它影響了背景圖像的顯示方式。線性漸變影響背景大小：覆蓋

.hero-cover { 
 
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),url(http://monstacdn.com/dd/images/assets/cover.jpg); 
 
    background-image: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),url(http://monstacdn.com/dd/images/assets/cover.jpg); 
 
    background-position: 0 0,50% 100%; 
 
    background-size: auto,cover; 
 
}

<div class="section hero-cover"> 
 
    <div style="padding:100px;"></div> 
 
</div>

來源

2017-03-02 Daniel Williams

如果你只是刪除從background-image聲明梯度而不同時修改background-position和background-size聲明，這就是問題所在。當你這樣做時，這些聲明中的第一個值就會應用到圖像上，而第二個值將變爲未使用。這是導致圖像顯示不同的原因。（請注意，漸變也被認爲是CSS中的圖像。）

在修改或添加或刪除分層背景時，這裏要特別小心。如果您的背景風格分散在多個longhand聲明中，請確保您編輯所有這些聲明。在這種情況下，你還需要從background-position和auto從background-size刪除0 0：

.hero-cover { 
 
    background-image: url(http://monstacdn.com/dd/images/assets/cover.jpg); 
 
    background-position: 50% 100%; 
 
    background-size: cover; 
 
}

<div class="section hero-cover"> 
 
    <div style="padding:100px;"></div> 
 
</div>

來源

2017-03-02 03:17:08 BoltClock

線性漸變影響背景大小：覆蓋

回答

相關問題