线性渐变影响背景大小：覆盖

我发布的代码是做我想做的，但我想要从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

线性渐变影响背景大小：覆盖

回答

相关问题