CSS 淡入背景图片

Question

我正在学习 CSS，我想将鼠标悬停在某些文本上，文本消失，图像淡入。我已经测试了一些东西，但它没有按照我想要的方式工作。

文本是 link 在悬停时我设置了背景图片。我可以使用 an，但我希望文本位于的中间，并且它已经位于具有绝对位置的 a 中。

这是 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; }`

如果有人能帮助我，我将不胜感激。

Answer 1

不确定您是否可以完全按照您想要的方式进行。对于 "fade in"，您通常会为图层的不透明度设置动画，但这适用于整个图层，而不仅仅是背景图像。但是你为什么不把Image移动到另一层，像这样：

 <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;
}

Answer 2

您可能希望使用不透明度和淡入效果。

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。

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

Answer 4

我已将 text-indent 属性添加到您现有的 CSS。因此，当您将鼠标悬停在 link 上时，文本将离开屏幕（隐藏）并且您只会看到图像。

.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

CSS 淡入背景图片

CSS fade-in background image

html

css

hover