html – 如何用css“着色”图像

发布时间：2020-12-14 18:33:03 所属栏目：资源来源：网络整理

导读：我尝试使用如下背景属性为图像着色： .image-holder:hover { opacity: 1; transition: opacity 1s,background 1s; background: #EBEFF7;}.image-holder { height: 250px; width: 200px; opacity: 0.5; transition: opacity 1s,background 1s;} div class="im

我尝试使用如下背景属性为图像着色：

.image-holder:hover {
  opacity: 1;
  transition: opacity 1s,background 1s;
  background: #EBEFF7;
}

.image-holder {
  height: 250px;
  width: 200px;
  opacity: 0.5;
  transition: opacity 1s,background 1s;
}

<div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

http://jsfiddle.net/6ELSF/1047/

但是图像并没有像预期的那样“着色”.

在悬停时它看起来像这样：

但我希望它看起来像这样：

我试图测试一些我发现的关于图像叠加的解决方案但是在我的例子中都没有.
如何以最简单的方式完成这项工作？

解决方法

使用：在选择器之前,您可以使用不同的颜色着色图像

.image-holder {
  height: 200px;
  width: 200px;
  position:relative; 
}    
.image-holder:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,0.5);
  transition: all .3s linear;
}
.image-holder:hover:before { 
  background: none;
}

<div class="image-holder">
    <img src="http://lorempixel.com/200/200" />
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!