Question

所以这就是我在这里工作的：

HTML：

<div id="smith">
    <img class="top" src="http://i.imgur.com/D6Kohra.png"/>
</div>

CSS：

#smith {
    background: url("http://i.imgur.com/1ABXZ1y.png") no-repeat center;
    -webkit-transition: all .5s ease-in-out 0;
    -moz-transition: all .5s ease-in-out 0;
    -o-transition: all .5s ease-in-out 0;
    transition: all .5s ease-in-out 0;
}

#smith img {
  position:fixed;
  -webkit-transition: all .5s ease-in-out 180s;
  -moz-transition: all .5s ease-in-out 180s;
  -o-transition: all .5s ease-in-out 180s;
  transition: all .5s ease-in-out 180s;
}

#smith img.top {
    position:fixed;
    display:inline;
    left:50%;
}

#smith img.top:hover {
      opacity:0;
      transition:0;
}

#smith img.bottom:hover {
  transition:0;
}

基本上;我试图让它首先显示顶部图像，然后在悬停时，更改为查看底部图像，同时冻结底部图像，以便即使在悬停时您仍继续看到底部图像。

我把它放在JsFiddle中：http://jsfiddle.net/mcKempt/gyn8fdt4/

我的问题是背景要么一直可见，要么我可以隐藏它，但即使在悬停时也会隐藏。尝试首先将其设置为自己的单独图像并将不透明度设置为0，但是当我不想要它时它仍然可见或不可见。

如果有更好的方法将过渡事物设置为'180s'，请告诉。

此外，更多信息网站将成为炸弹。我只能使用CSS / HTML。

由于

Answer 1

正如我在上面的评论中提到的，永久更改需要使用Javascript。

但是，半永久性效果可以使用基本状态的非常长的转换持续时间和“返回”:hover状态的短暂转换来伪造。

#smith {
  background-color: transparent;
  height: 87px;
  width: 383px;
  border: 1px solid red;
  margin: 25px;
  background: url("http://lorempixel.com/400/200/sports/") no-repeat center;
}
#smith img.top {
  display: block;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 999s ease;
}
#smith img.top:hover {
  opacity: 0;
  transition: opacity .5s;
}

<div id="smith">
  <img class="top" src="http://i.imgur.com/D6Kohra.png" />
</div>

对于背景图像，这些不能转换。因此，我建议使用伪元素解决方案。

#smith {
  background-color: transparent;
  height: 87px;
  width: 383px;
  border: 1px solid red;
  margin: 25px;
  position: relative;
}
#smith:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("http://lorempixel.com/400/200/sports/") no-repeat center;
  z-index: -1;
  opacity: 0;
  transition: opacity 999s ease;
}
#smith:hover:before {
  z-index: -1;
  opacity: 1;
  transition: opacity .5s;
}
#smith img.top {
  display: block;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 999s ease;
}
#smith img.top:hover {
  opacity: 0;
  transition: opacity .5s;
}

<div id="smith">
  <img class="top" src="http://i.imgur.com/D6Kohra.png" />
</div>

使此背景透明，然后可见，然后保持可见

1 个答案: