CSS淡入背景图像

Question

我正在学习CSS，希望实现鼠标悬停在文本上时，文本消失并淡入一张图片。我尝试了一些方法，但没有达到预期效果。

文本是一个链接，在

中，当悬停时设置背景图片。我可以在

中使用，但我希望文本位于

的中央，并且它已经处于绝对定位的

中。

以下是HTML代码：

<div class="header"> 
  <!--<ul>-->
  <div class="header_element">
    <a title="Home" href="page.php"> Home </a>
  </div>

同时需要翻译的CSS代码：

    div.header_element {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      height: 100%;
    }

    div.header_element:hover {
      background-position: center;
      background-image: url("hover.png");
      background-repeat: no-repeat; 
    }

希望有人能帮我解决这个问题。

- Turpestax

---

添加text-indent属性。检查我的答案。 - Prime

Answer 1

您可能想要使用不透明度和淡入效果。

div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}

div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

如果这是你想要的，可以查看jsfidle。

- Karolína Vyskočilová

---

这是否假定图像在动画开始（或结束）之前已加载？ - Max Waterman

Answer 2

不确定您是否可以完全按照您想要的方式完成。通常情况下，“淡入”是通过动画化图层的不透明度来实现的，但这适用于整个图层而不仅仅是背景图像。但是为什么不将图像移动到另一个图层中，就像这样：

 <div class="header_element">
    <div class="header_background"></div>
    <a title="Home" href="page.php"> Home </a>
 </div>

另外，在用户悬停之前加载图像可能会更好，因为这样你就会有一个明显的延迟，直到图像实际加载。

CSS 可能看起来像这样（尽管没有测试）：

.header_background {
    transition: opacity 1s;
    background-position: center;
    background-image: url("hover.png");
    background-repeat: no-repeat;
    opacity: 0;
}

.header_element:hover > .header_background {
    opacity: 1;
}

- frontend_dev

---

我没有深入测试过，但我猜可能会有问题，文本不会在 div 的中心。它会分开。 - Turpestax

不，为什么要这样做呢？添加一些CSS使其绝对定位：position: absolute; top: 0; width: 100%; height: 100%; - frontend_dev

Answer 3

尝试添加以下CSS，看它是否适用于您：

.header_element{
    background: red;
    display: inline-block;
}

.header_element > a{
    display: inline-block;
    padding: 5px 10px;
}

.header_element:hover > a{
    opacity: 0;
}

.header_element:hover{
    background: url(http://dummyimage.com/60x28/000/fff);
}

您可以在这里查看测试：jsfiddle

- prettyInPink

---

谢谢，你给了我一个比我原来解决文本消失问题更好的方案，我将它与kybernaut的淡入效果结合使用，现在一切都很好。 - Turpestax

Answer 4

我已经将 text-indent 属性添加到您现有的 CSS 中。因此，当您悬停链接时，文本将会离屏隐藏，并且您将只看到图像。

.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}

.header_element a:hover{
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;   
display:block;
text-indent: -9999px;   
}

http://jsbin.com/kexadaqaxu/3/edit

- Prime

---

那是一个好主意，谢谢。但是那段文本是一个链接<a>，所以我想我在解释时没有表达得很清楚，但我仍然希望它可以点击。我只是在<a>上添加了悬停效果，让文本变成透明的，而且字体足够大，如果你不在这个链接上，你基本上看不到这个链接。 - Turpestax

编辑：asturnick提供了更好的解决方案，只需使用header_element:hover > a{ opacity: 0; }即可隐藏文本，即使不在其上也是如此。 - Turpestax