具有渐变叠加 + 背景大小的可重复背景图像

Question

我有一个纹理，想用作可重复的背景图像。我希望背景也包含图像顶部的渐变叠加层，以便背景淡出为纯白色。我能够像这样工作：

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
}

<div class="texture"></div>

问题是我想让纹理变小，所以我添加了一个背景大小来实现这一点，但这似乎搞砸了我的渐变叠加，如下所示：

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
  background-size: 100px 100px;
}

<div class="texture"></div>

有没有办法在不影响渐变叠加工作方式的情况下调整背景图像的大小？

Answer 1

您可以为每个背景图像定义不同的背景尺寸：

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
  background-size: auto, 100px 100px;
}

<div class="texture"></div>

具有渐变叠加 + 背景大小的可重复背景图像

Repeatable background image with gradient overlay + background-size

css

background-image

linear-gradients