LAFINSIR 2023-03-20 22:21 采纳率: 70.4%
浏览 392
已结题

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

css怎么改变图片颜色

img

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

img

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


因为我这个网站每个客户的主题色不同,我是通过加载不同的css文件来实现的。但是这个background-image的linear-gradient属性怎么分开写,我尝试在class中写linear-gradient,在标签中只写url,但这样好像没效果

.pic1 {
  background-image: linear-gradient(#f00, #f00);
  background-blend-mode: lighten;
  background-size: cover;
  width: 200px;
  height: 200px;
}



  • 写回答

11条回答 默认 最新

  • 阳光宅男xxb 2023-03-21 08:46
    关注

    这个问题的点就是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;
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(10条)

报告相同问题?

问题事件

  • 系统已结题 4月2日
  • 已采纳回答 3月25日
  • 创建了问题 3月20日

悬赏问题

  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力