Question

我有一个图像文件，我希望以不同的音调显示不同的事件。假设按钮上的点击事件，我需要传递颜色代码，图像的色调必须是该颜色。我怎么能这样做，最好只用css？

Answer 1

您可以尝试css3中提供的颜色混合功能。样本将是：

.blend {
  background-image:url(blend-mode-mult.jpg);
  width:450px;
  height:450px;
  background-color: #f79e9e;/*pass your color variable here*/
  background-blend-mode: multiply;
}

Answer 2

这样的东西？我使用#f6ff00进行此测试，但你当然可以使用任何东西。您还可以更改.active类的不透明度值。

$('.frame').mouseover(function(){
  $(this).find('.color-block').addClass('active').css('background-color', '#f6ff00');
}).mouseleave(function(){
  $(this).find('.color-block').removeClass('active');
});

.frame{
  width: 300px;
  height: 150px;
  position:relative;
}
.frame img{
   width: 100%; 
   height: 100%;
}
.frame .color-block{
  position:absolute;
  width:100%;
  height:100%;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity:0;
}
.frame .color-block.active{
  opacity: 0.3;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="frame">
<div class="color-block"></div>
<img src="http://photos2.appleinsidercdn.com/13.01.31-Newell.jpg">
</div>

如何仅使用css动态改变图像的色调？

2 个答案: