我正在尝试创建响应式 html 覆盖层(其中包含一张图像和关闭按钮)。它应该是从页面顶部向下 30 像素。
我尝试了以下代码:
html
<div class="wrapper">
<div class="overlaymain">
<img class="overlayimage" src="http://assets.cobaltnitra.com/teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
</div>
</div>
CSS
.wrapper {
position:relative;
height:100%;
background:red;
opacity:0.9;
}
.overlaymain {
top:30px;
position:absolute;
}
<强> jsfiddle
我无法让它工作。
最佳答案
您可以尝试以下操作 - 它使用 css3 使覆盖图像保持居中(使用下面代码片段上的完整页面链接并调整浏览器大小进行测试),并且应该适用于所有主要浏览器。
我不确定包装 div 的用途,所以我将其删除。如果需要,您可以将其添加回来,因为它对下面的代码没有任何影响。
var overlay = $('.overlay'),
close = $('<div class="close">close</div>');
overlay.append(close);
$(overlay, close).on('click', function () {
overlay.fadeOut();
});
.overlay {
position:fixed;
left:0;
right:0;
top:30px;
bottom:0;
background:rgba(255, 0, 0, 0.7); /* use this so that the image doesn't go opaque too */
}
.overlay > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* center the image in the overlay */
}
.close {
border-radius:5px;
color:#ffffff;
background-color:#000000;
display:inline-block;
padding:5px 10px;
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
watsapppwatsapppwatsappp
<br>
<br>watsapppwatsapppwatsappp
<div class="overlay">
<img class="overlayimage" src="http://assets.cobaltnitra.com/teams/repository/export/v/1/391/435a06bcb100589f410145edef087/391435a06bcb100589f410145edef087.png">
</div>
关于javascript - 响应式 html 覆盖在页面顶部并带有关闭按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32777731/