热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

Ihavegivenbox-shadowtoimage我给了影像盒子阴影box-shadow:0010pxREDinsetbuttheshadowisnot

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

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

enter image description here

1 个解决方案

#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属性)


推荐阅读
author-avatar
用户uuexwjx90j
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有