请问怎么通过css改变图片颜色

Question

css怎么改变图片颜色

HTML:

   <div class="pic1" style=" background-image: url('https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png');"></div>

CSS:

.pic1 {
  background-blend-mode: lighten;
  background-size: cover;
  width: 200px;
  height: 200px;
}

HTML标签的style加上属性:linear-gradien

HTML:

  <div
                  class="pic1"
                  style="
                    background-image: url('https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png'), linear-gradient(#f00, #f00);
                  "
                >

Answer 1

这个问题的点就是css中的样式和html代码中的样式不能同时生效，所以你这个思路不起作用，建议在html中不设置样式，把图片的url作为变量传入到css中。或者你换种实现方法。

.pic1 {
  background-image: linear-gradient(#f00, #f00),url("<%=someImageURL%>");
  background-blend-mode: lighten;
  background-size: cover;
  width: 200px;
  height: 200px;
}