Question

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

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

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

Answer 1

两个选项（或三个）。

具有叠加渐变的背景图像

＆＃13;

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

＆＃13;

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

＆＃13;

带有bg图像和CSS过滤器的伪元素

MDN Reference

＆＃13;

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

＆＃13;

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

＆＃13;

后台混合模式

MDN Reference

＆＃13;

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

＆＃13;

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

＆＃13;

色的织地不很细背景图象

1 个答案: