在css中覆盖带有透明空间的图像
在css中覆盖带有透明空间的图像
提问于 2018-08-11 09:37:57
可以像下面的CSS中的图像那样覆盖360全景图，有一个空的透明空间，响应性和保持比例
我尝试创建4个div并使用这个css
<div><div></div><div></div><div></div><div></div></div>
#frame div:nth-child(1) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#frame div:nth-child(2) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#frame div:nth-child(3) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
top: 0;
}
#frame div:nth-child(4) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
bottom: 0;
}
回答 1
Stack Overflow用户
发布于 2018-08-11 16:12:46
请在下面尝试：
HTML：
<div class="container">
<img src="imgSrc" alt="imgName" style="width:100%;">
<div class="content">
</div>
</div>CSS：
.container {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content{
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 40%;
box-shadow: 0 0 0 9rem rgba(0, 0, 0, 0.5);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51795732
复制相关文章
相似问题