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张图片而不是背景图片。

在响应式图像的顶部添加叠加图像

1 个答案: