Question

DIV+CSS如何通过圆角背景图片实现网页中插入的其他图片显示为圆角？

就是一个DIV的背景是一张中间透明四角白色的PNG图，要实现在这个DIV中插入的其他直角图片显示为圆角，参考网站大视觉婚纱摄影的首页。
有点急，求会做的大神指导下，QQ 770723964

Answer 1

BODY里面的代码：

<ul class="sc1">

<li><a rel="sc" href="/p/uploadfile/201109/15/8712819728.jpg"><img src="80x80.jpg" alt="海洋之心"/><span></span></a></li>

</ul>

CSS代码：

img {border:0;}

.sc1{padding:10px 0 45px;clear:both;width:930px;overflow:hidden}

.sc1 li{float:left;width:80px;margin:0 12px 12px 0;display:inline}

.sc1 img{width:80px;height:80px;display:block}

.sc1 a:hover img{filter:Alpha(Opacity=60);opacity:0.6}

.sc1 a span,.sc1 a:hover span{position:relative;margin:-80px 0 0 0;float:left;background:url(i.png) no-repeat;_background:url(i.gif) no-repeat;width:80px;height:80px;cursor:pointer}

i.png 这个是圆角背景图片  

最后效果如图：

楼主自己试一下。还不懂的给我留言！

Answer 2

弄两个层div1和div2，设置z-index值不同，div1在上面，css成你想要的样式，div2在下面展示你插入的图片，然后插入的时候js改写div2内容。

Answer 3

教你个最简单的方法好了，你再做一个镂空的图片，镂空部分就是圆角图片显示的区域就行了
<div class="bg01">
<div class="bg02"></div>
</div>

其中你把bg01设为你想插入的图片，bg02设为镂空图片，这样的遮罩效果就行了，非常简单

追问

好像这样只能在设置为背景图片才有用的？ 前台显示的图片是插入的哦？

追答

那你直接用绝对位置控制浮动的镂空标签好了

我在本机上试过了，没问题

不想用这种方法的话，那你就寻找圆角的js脚本好了，不推荐用滤镜，因为滤镜并不能兼容所有浏览器都显示

Answer 4

背景图片不应该在子元素的上面吧
你给的网站里面的元素不是父子关系，是兄弟关系的
用两个元素，把照片的z-index设置大于背景的z-index

Answer 5

1. 方法一，可以切图做绝对定位

2. 方法二，border-radius来设定圆角