使用CSS淡入叠加块的最简单方法

Question

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>

Answer 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 关键帧演示

Answer 2

目前，您所拥有的不是覆盖层，而是一个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;
}

Answer 3

我认为你看起来像这样。

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

演示版