我的页面上有一个图像,我想在其上放置一个插入框阴影.
我尝试用div中的图像进行此操作.
任何人都可以帮助我显示插入框阴影吗？
我尝试用div中的图像进行此操作.
任何人都可以帮助我显示插入框阴影吗？
HTML：
<body> <div id="logo"> <img src="images/key.jpg" width="3%" height="3%"/> </div> <a href="scene2.html" class="next">Next</a> <a href="abduction.html" class="back">Back</a> <img src="images/scene1.jpg" width="650" height="650" class="backing"/> </body> </html>
CSS
.backing {
position:relative;
z-index:-10;
float:left;
margin-left:12%;
Box-shadow: 0 0 -50px -50px #FFF;
-moz-Box-shadow: 0 0 -50px -50px #FFF;
-webkit-Box-shadow: 0 0 -50px -50px #FFF;
}
.next {
position:relative;
margin-left:8%;
z-index:200;
}
.back {
position:relative;
margin-left:2%;
z-index:220;
}
解决方法
Box-shadow inset对图像不起作用,你需要创建一个div并给该div提供Box-shadow并将图像放入该div中.
您还可以在img元素上使用负z-index,并在div元素上使用带有插入值的Box-shadow.
div {
position: relative; /* Not required now */
margin: 10px;
float: left;
Box-shadow: inset 0 0 12px blue;
border-radius: 50%;
}
div img {
display: block;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
z-index: -1;
}
