影响背景大小的线性渐变:封面

Question

我发布的代码正在做我想做的事，但我想从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>

Answer 1

如果您只是从background-image声明中删除梯度，而不同时修改background-position和background-size声明，这就是问题所在。执行此操作时，每个声明中的第一个值将应用于图像，第二个值将变为未使用状态。这就是导致图像显示不同的原因。(请注意，渐变在 CSS 中也被视为图像。

这里的要点是在修改、添加或删除分层背景时要非常小心。如果背景样式分布在多个手写声明中，请确保编辑所有样式。在这种情况下，您还需要从background-position中删除0 0并从background-size中删除auto：

.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>