作者:用户uuexwjx90j | 来源:互联网 | 2023-01-28 17:18
I have given box-shadow
to image
我给了影像盒子阴影
box-shadow: 0 0 10px RED inset
but the shadow is not appearing on image, if i change path of image by using firebug then i can see that shadow is in the back side of image.
但阴影没有出现在图像上,如果我通过使用firebug改变图像的路径,那么我可以看到阴影位于图像的背面。
I want to give shadow on the image, Please help
我想在图像上给阴影,请帮忙
1 个解决方案
9
Solution 1
Use CSS Positioning techniques to achieve that.... Here, first of all am wrapping the image in a div
element and later am using CSS pseudo :after
element which is positioned absolute with an inset box-shadow
使用CSS定位技术来实现这一点....这里,首先将图像包装在div元素中,然后使用CSS伪:在元素之后使用插入框阴影定位绝对
Now make sure you've set the container element, in this case it's a div
element to position: relative;
else your shadow will fly out in the wild.
现在确保你已经设置了容器元素,在这种情况下它是一个div元素来定位:relative;否则你的影子会在野外飞出。
Demo
div:after {
content: "";
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
box-shadow: inset 0 0 12px blue;
top: 0;
left: 0;
z-index: 1; /* You can use higher to ensure that it stays on top */
}
I forgot to use the z-index
property so use it for the absolute
positioned pseudo to ensure that it stays on the top always...
我忘了使用z-index属性,所以将它用于绝对定位的伪,以确保它始终保持在顶部...
Also, would like to make a note here that if you want the div
to be side by side, you will need float
or display: inline-block;
as div
elements are block in nature and will take 100% of the document width
...
另外,想在这里做一个注释,如果你想要div并排,你需要浮动或显示:inline-block;因为div元素本质上是块,并且将占用文档宽度的100%...
Demo (z-index
included in this demo)
演示(本演示中包含z-index)
Solution 2
If for some reason you want to ignore the use of :after
pseudo (I don't see any reason of doing that as it's supported on IE8 as well) so you can also use a negative z-index
on the img
element, and use the box-shadow
with inset
value on the div
element.
如果由于某种原因你想忽略使用:after伪(我没有看到任何理由这样做,因为它也支持IE8)所以你也可以在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;
}
Demo 2 (Just playing with the z-index
property)
演示2(只是玩z-index属性)