将插入框阴影放在div中的图像或图像上 [英] putting a inset box shadow on an image or image within a div
本文介绍了将插入框阴影放在div中的图像或图像上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的页面上有一个图像，我想把一个插入盒子的阴影。
我试图这样做的图像在和在一个div。
任何人都可以帮助我获得一个插入框阴影来显示？
I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset box shadow to display?
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;
}
推荐答案
阴影插入不会在图像上工作，你需要创建一个div，并给盒子阴影到那个div，并把图像放在div。
Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.
你也可以使用一个负img元素上的z-index，并在div元素上使用带阴影值的box-shadow。
You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.
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;
}
这篇关于将插入框阴影放在div中的图像或图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
