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

你现在所拥有的不仅仅是一个重叠，而是另一个div。

要使其成为叠加层，您需要使用position:absolute，如下所示：

JSfiddle Demo

<强> 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 2

我认为你看起来像这样。

.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

Answer 3

你没有指定，所以我只能假设你想使用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');
});

DEMO

请求在没有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;
    }
}

No JS Keyframe DEMO

Answer 4

试试这个：

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

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

4 个答案: