Question

我正在使用应用背景图像的元素。当我将鼠标悬停在此元素上时，相同的背景图像应该稍微褪色。可以不使用第二张图像。

Answer 1

最简单的方法是在包含图像的元素上设置一个透明层，然后淡入淡出。 See this JSFiddle是一个有效的例子。

CSS

.example {
height: 80px;
width: 200px;
background: url(http://lorempixel.com/400/200/) 50% 50% no-repeat;
background-size: cover;
}

.example:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: 0;
position: relative;
transition: .3s all;
}

.example:hover:after {
opacity: 0.8;
}

请注意，转换需要前缀才能在所有浏览器中使用。

HTML

<div class="example"></div>

Answer 2

检查Fiddle：

.image1{
    width:400px;
    height:400px;
    background-image: url("http://www.designsnext.com/wp-content/uploads/2014/04/nature-wallpapers-3.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
   
}

.image1:hover{
    width:400px;
    height:400px;
    background-image:url("http://wallpapersshd.com/wp-content/uploads/2013/02/free-natural-wallpaper.jpg");
    background-size:100%;
   -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

<div class="image1"></div>

如何使用css悬停元素时淡化背景图像

2 个答案: