Question

我发布的代码正在执行我想要的操作，但我想要从CSS中删除linear-gradient。问题在于，当我把它拿出来时，它会影响背景图像的显示方式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

线性梯度影响背景大小：封面

1 个答案: