Question

小提琴：https://jsfiddle.net/jzhang172/708p96v3/

我试图在使用jquery和javascript的background-color之前更改：。根据我的研究，人们说这是不可能的。如何更改此图像色调的颜色呢？如果有可能没有：之前，那也没关系。

＆＃13;

 $(function(){
 $('.div:before').addClass('wto');
    $('.div').css('background-color','orange');
    
    });

＆＃13;

.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(22, 255, 171, 0.88);
  transition:2s;
}
.div:hover:before{
  background:red;
}
body,html{
  position:Relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>

＆＃13;

Answer 1

我想你想要这样的东西：

＆＃13;

body,html {  position: Relative;}
.div {
  height: 500px;
  width: 500px;
  background: url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position: Relative;
}
.div:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: rgba(22, 255, 171, 0.88);
  transition: 2s;
}
/***********check this block**********************/
.div:hover:before {
  background: rgba(255, 0, 0, 0.88);
  transition: 2s;
}
/*************************************************/

＆＃13;

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

＆＃13;

Answer 2

我遇到了一个肮脏的伎俩。可能这可能是你的工作。

 $(function(){
    $('#changeColor').click(function(){
    	 html = "<style>.div:before{background:rgba(22, 255, 171, 0.75) !important;}</style>"
    
    	 $('.div').append(html);
    });
});

.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(0, 0, 0, 0.75);
  transition:2s;
}
body,html{
  position:Relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" id="changeColor">Change</a>

<div class="div">&nbsp;</div>

Answer 3

如果我理解你的问题，你明确地问你如何用javascript来做到这一点。

据我所知，你无法用javascript影响伪元素。

但是，如果我没有弄错你不关心伪元素，你只需要对图像进行着色并在:hover上更改颜色。这实际上是可能的，虽然它有点复杂，所以我不能在这里给你一个解决方案，只是一些指示：

选项一：CSS过滤器和SVG

您是否知道CSS具有filter属性，可以让您执行添加模糊或更改对比度等操作？的 Here's a nice overview with examples

使用该属性，您还可以加载SVG过滤器并将该过滤器应用于您的元素，图像以及大多数其他元素。 SVG过滤器允许您指定可用于着色图像的颜色矩阵，实际上CSS filter属性已经内置了一个SVG过滤器，用于着色图像棕褐色。

所以这是 Tutorial about colorizing greyscale images 。通过一些试验和错误，我认为你可以建立自己的颜色矩阵来对彩色图像做同样的事情（特别是因为它们也解释了棕褐色矩阵是如何工作的）。

请注意，此方法有 limits 。

选项二：Javascript magic

我不会写太多关于这些的内容，因为我在SO上发现了两个帖子，告诉你需要知道的一切：

您可以 write your own code 对图像进行着色，或者 use a jQuery plugin 来实现此效果。

Answer 4

由于你的Div采用了背景图像，我会在Div中改变背景颜色的值，并给出：在背景颜色之前的继承值。

.div
{
  background-color: rgba(22, 255, 171, 0.88);
}

.div:before
{
  background-color: inherit;
}

更改Div：的背景颜色：

Div.style['background-color'] = 'rgba(0, 255, 255, 0.88)';

是否有可能改变：在使用javascript或jQuery之前

4 个答案:

选项一：CSS过滤器和SVG

选项二：Javascript magic