是否可以更改:在使用javascript或jQuery之前
小提琴：https://jsfiddle.net/jzhang172/708p96v3/
我正在尝试使用jquery和javascript来更改背景颜色之前的：。根据我的研究，人们说这是不可能的。那我怎么改变这张图片的色调呢？如果可以不使用: fine，那么这也是可以的。
$(function(){
$('.div:before').addClass('wto');
$('.div').css('background-color','orange');
});.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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>
回答 4
Stack Overflow用户
发布于 2016-03-08 16:27:55
我想你想要这样的东西：
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;
}
/*************************************************/<div class="div"></div>
Stack Overflow用户
发布于 2016-03-08 16:39:54
我偶然发现了一个下流的把戏。也许这能帮到你的忙。
$(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"> </div>
Stack Overflow用户
发布于 2016-03-08 17:15:16
如果我没理解错的话，你是在问如何用javascript做到这一点。
据我所知，你不可能用javascript来影响伪元素。
但是，如果我没有记错的话，您并不关心伪元素，您只想对图像着色并在:hover上更改颜色。这实际上是可能的，虽然有点复杂，所以我不能在这里给你一个解决方案，只是一些要点：
选项一: CSS过滤器和SVG
你知道CSS有一个filter属性可以让你做像添加模糊或者改变对比度这样的事情吗？。
使用该属性，您还可以加载SVG过滤器，并将该过滤器应用于您的元素、本例中的图像以及大多数其他元素。SVG滤镜允许您指定可用于着色图像的颜色矩阵，实际上CSS filter属性已经内置了一个SVG滤镜，用于着色图像深褐色。
这是一个。通过一些试验和错误，我认为您可以构建自己的颜色矩阵来对彩色图像执行相同的操作(特别是因为它们还解释了深褐色矩阵是如何工作的)。
但是要注意，这个方法有它的。
选项二: Javascript魔术
我不会写太多关于这些的文章，因为我在上面找到了两篇文章，这两篇文章可以告诉你你需要知道的一切：
您可以使用对图像进行着色，也可以使用来实现该效果。
https://stackoverflow.com/questions/35862241
复制相似问题
腾讯云开发者
