使用CSS在覆盖块中淡入淡出的最简单方法

http://jsfiddle.net/AndyMP/T5pX2/

.block {
    position: relative;
    margin: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.overlay {
    width: 300px;
    height: 300px;
    background: yellow;
    opacity: 0;
}
<div class="block">
    <div class="overlay">
    </div>
</div>

您目前拥有的不是覆盖，它只是一个div在另一个div中。

要使其成为覆盖，您需要使用position:absolute，如下所示：

JSfiddle演示

CSS

.block {
    position: relative;
    margin: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding:1em;
}
.overlay {
    background: rgba(0,0,0,0.5);
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:opacity 0.5s ease;
}
.block:hover .overlay {
    opacity:1;
}

您没有指定，所以我只能假设您想使用CSS动画来淡化不透明度：

.block {
    position: relative;
    margin: 25px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
.overlay {
    width: 300px;
    height: 300px;
    background: yellow;
    opacity: 0;
    transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
}
.fade-in {
    opacity: 1;
}
$( document ).ready(function() {
    $('.overlay').addClass('fade-in');
});

演示

在请求在没有javascript的情况下工作后，这里有一个从页面加载开始的关键帧解决方案：

.overlay.fade-in {
 -webkit-animation: fade-yellow 5s infinite;
 -moz-animation: fade-yellow 5s infinite;
 -o-animation: fade-yellow 5s infinite;
 animation: fade-yellow 5s infinite;
}
@-webkit-keyframes fade-yellow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

无JS关键帧演示

我觉得你看起来像这样。

.block {
position: relative;
margin: 25px;
width: 300px;
height: 300px;
border: 1px solid black;
}
.overlay
{
  opacity: 0;
}
.block:hover .overlay {
width: 300px;
height: 300px;
background: yellow;    
opacity: 1;
}

DEMO

试试这个：

<html>
    <head>
        <title></title>
        <style>
            .block {
                position: relative;
                width: 300px;
                height: 100px;
                background: blue;
            }
            .overlay {
                position: absolute;
                z-index: 1;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                background: red;
                opacity: 0;
                transition: 1s;
                -moz-transition: 1s;
                -webkit-transition: 1s;
                -ms-transition: 1s;
                -o-transition: 1s;
            }
            .overlay:hover {
                opacity: 1;
            }
        </style>
    </head>
    <body style="margin: auto;">
        <div class="block">
            Block
            <div class="overlay">
                Overlay
            </div>
        </div>
    </body>
</html>

相关内容

最新更新

热门标签：