image - 在响应图像的顶部添加叠加图像

Question

这就是我所拥有的:

HTML

<div class="frame-container">
    <img src="http://placehold.it/400x600" id="image" alt="test" />
    <div class="overlay"></div>
</div>
<button id="button">Add Overlay</button>

CSS

.frame-container{
    padding: 15%;
    background-color: #333333;
    -webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
    -moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
    box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
    width:100%;
    overflow: hidden;
}
.frame-holder{
    border: 4em #000000 solid;
}

.overlay{
    width:100%;
    height:100%;
    background-color:fff;
    background-image: url('http://placehold.it/400x600&text=woo!');
    background-size:cover;
    z-index:9999;
    display:hidden;
}

JS

<script>
    $('#button').click(function(){
        $('.overlay').css( "display", 'inline'; );
    });
</script>

https://jsfiddle.net/vwvu5ee8/7/

我想做的就是单击按钮，它会将叠加图像添加到当前图像的顶部。

我已经尝试了各种方法，但已经开始没有想法了。我确信从这个位置可以得到一个简单的答案。

Answer 1

尝试使用 display:none 和 display:block 而不是 display:hidden。您的 z-index 堆叠也存在问题。

HTML

<div class="frame-container">
  <div class="overlay"></div>
  <img src="http://placehold.it/400x600&text=Image" id="image" alt="test" />
</div>
<button id="addOverlay">Add Overlay</button>

CSS

.frame-container{
    padding: 15%;
    background-color: #333333;
    position:relative;
    -webkit-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
    -moz-box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
    box-shadow: 4px 6px 5px -1px rgba(120,120,120,0.75);
}
#image {
    width:100%;
    overflow: hidden;
    position:relative;
    z-index:10;
}

.overlay{
    width:70%;
    height:70%;
    position:absolute;
    background-color:fff;
    background-image: url('http://placehold.it/400x600&text=Overlay');
    background-size:cover;
    z-index:100;
    display:none;
}

JS

$('#addOverlay').click(function(e){
  $('.overlay').css('display','block');
});

这是 demo .还有一个 alternate version使用 2 张图像而不是背景图像。