悬停时变暗的背景图像

本文介绍了悬停时变暗的背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果在没有的情况下制作新的较深的图片，我该如何将背景图片变暗？ CSS：

  .image {
背景：url（'http://cdn1.iconfinder.com/data/icons/圆简单的社交图标/ 58 / facebook.png'）; 
 width：58px; 
 height：58px; 
}

JSFiddle链接：

解决方案

如何使用叠加？

  .image：hover> .overlay {
 width：100％; 
身高：100％; 
位置：绝对; 
背景颜色：＃000; 
不透明度：0.5; 
 border-radius：30px; 
}

How would I darken a background image on hover without making a new darker image?

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

JSFiddle link: http://jsfiddle.net/qrmqM/1/

解决方案

How about this, using an overlay?

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

Demo

这篇关于悬停时变暗的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！