在响应图像的顶部添加叠加图像
Add an overlay image over the top of a responsive image
这就是我所拥有的:
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/
我想做的就是单击按钮,它会将叠加图像添加到当前图像的顶部。
我尝试了各种方法,但开始 运行 没主意了。我相信从这个位置可以得到一个简单的答案。
尝试使用 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. And an alternate version 使用 2 张图片而不是背景图片。
这就是我所拥有的:
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/
我想做的就是单击按钮,它会将叠加图像添加到当前图像的顶部。
我尝试了各种方法,但开始 运行 没主意了。我相信从这个位置可以得到一个简单的答案。
尝试使用 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. And an alternate version 使用 2 张图片而不是背景图片。