img上的box-shadow插图不起作用

Question

我给box-shadow了图像

box-shadow: 0 0 10px RED inset

但阴影没有出现在图像上,如果我通过使用firebug改变图像的路径,那么我可以看到阴影位于图像的背面.

我想在图像上给阴影,请帮忙

Answer 1

解决方案1

使用CSS定位技术来实现这一....在这里,首先我包裹图像中的div元素,后来我使用CSS伪:after其被定位绝对与元素插图 box-shadow

现在确保你已经设置了容器元素,在这种情况下,它是一个div元素,position: 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 */
}

我忘了使用该z-index属性,因此将它用于absolute定位伪,以确保它始终保持在顶部...

此外,在此请注意,如果您希望div并排,您将需要float或display: inline-block;作为div元素本质上是块,并将采取100%的文件width...

Demo (z-index包含在此演示中)

解决方案2

如果由于某种原因,你要忽略使用:after伪(我看不出有任何理由这样做,因为它支持IE8为好),所以你也可以使用负z-index的上img元素,并使用box-shadow与inset价值上的div元素.

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 (只是玩z-index物业)