Question

我正在尝试在css3中重新创建底部3图像悬停效果在此页面上的功能，就像个人项目一样http://themes.grandpixels.com/muse/

我想在网站的jquery中完成，但据我所知，css3也可以吗？

基本上我想将鼠标悬停在图像上并让背景图像逐渐淡入以查看而不是第一张图像。

有人知道怎么做吗？我整个上午都被困住了。

感谢您的帮助:)

 <body>

 <div class="nav">
<img url="http://imgur.com/vErJT32,DQWhz1e#0">
 </div>

 </body>

 #nav {
margin: 0px;
padding: 0px;
 }

    #nav img {
display: block;
margin: 0 5px;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
background: url(http://imgur.com/vErJT32,DQWhz1e#1) no-repeat center top;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;

 }


    #nav img:hover {
background: url(http://imgur.com/vErJT32,DQWhz1e#1) no-repeat center top;
background: rgba(100, 125, 175, 0);
    }

Answer 1

这里有很多错误:) <img src="http://imgur.com/vErJT32,DQWhz1e#0" alt=""/>而非<img url="http://imgur.com/vErJT32,DQWhz1e#0">属性url在此无效。

淡出img以显示background可以使用CSS过渡+不透明度完成。

<div class="nav">
   <img src="http://lorempixel.com/200/200/nature">
 </div>

关联基本CSS：

.nav {
  background: url(http://lorempixel.com/200/200/city) no-repeat;
}
.nav img {
  opacity:1;
  transition:0.5s;
}
.nav:hover img {
  opacity:0;
}

http://codepen.io/anon/pen/HEwuF/

Answer 2

CSS是可能的，但使用绝对定位的元素，或者在此示例中;一个伪元素

JSFiddle Demo

<强> HTML

<div class="nav">    </div>

<强> CSS

.nav {
    margin: 0px;
    padding: 0px;
    width:480px;
    height:200px;
    position: relative;
    border:1px solid grey;
}

.nav:before {
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(http://i.imgur.com/vErJT32.jpg) no-repeat center top;
    opacity:0;
    transition:opacity .5s ease;
}


.nav:hover:before {
    opacity:1;

}

CSS3背景图片fadeIN在图像上？

2 个答案: