Question

我正在学习CSS，我想在一些文本上悬停，文本消失，图像上有淡入淡出。我已经测试了一些东西，但它不能像我想要的那样工作。

文本是悬停中和悬停中的链接我设置了背景图像。我可以使用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

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

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 2

不确定您是否可以按照自己的方式完成。到＆＃34;淡入＆＃34;您通常为图层的不透明度设置动画，但这适用于整个图层而不仅仅是背景图像。但是，为什么不将图像移动到另一层，如下所示：

 <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 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中。因此，当您悬停链接时，文本将离开屏幕（隐藏），您将只看到图像。

.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淡入背景图片

4 个答案: