悬停时变暗的背景图像 [英] Darken background image on hover

问题描述

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

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

JSFiddle链接： http://jsfiddle.net/qrmqM/1/

解决方案

如何使用叠加？

  .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

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