彩色纹理背景图像

Question

我找到了一张我想要着色的图片。我可以更改图像的颜色而无需在 Photoshop 等应用程序中进行编辑吗？例如。

background-image: url('texture.png');
background-color: blue;

然后将它用于多个部分但每次都更改颜色？只是想知道这是否可行，是否有人可以告诉我该怎么做。

Answer 1

几个（或三个）选项。

带叠加渐变的背景图片

div {
  height: 100px;
  margin: 1em auto;
  color: white;
}
.bg-gradient {
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
  background-size: 100% auto;
}

<div class="bg-gradient"></div>

Pseudo-element 带背景图片和 CSS 滤镜

MDN Reference

div {
  height: 100px;
  margin: 10px auto;
  color:white;
}


.pseudo {
  position: relative;
  background: #000;
}

.pseudo:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
 background:url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
    background-size: 100% auto;
  }

.pseudo.blue {
  -webkit-filter:sepia(1) hue-rotate(90deg);
          filter:sepia(1) hue-rotate(90deg);
  
}


.pseudo.purple {
  -webkit-filter:sepia(1) hue-rotate(270deg);
          filter:sepia(1) hue-rotate(270deg);
  
}

<div class="pseudo blue">Text</div>

<div class="pseudo purple">Text</div>

背景混合模式

MDN Reference

div {
  height: 100px;
  margin: 1em auto;
  color: white;
}
.blend {
  background-image: url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
  background-color: #663399;
  background-blend-mode: multiply;
  background-size: 100% auto;
}

<div class="blend"></div>

彩色纹理背景图像

A coloured textured background image

css

textures

masking