Question

css中，如何让一张图片只在另一张图片的区域内显示？

就像ps中的剪贴蒙版一样，让一个图片在特殊形状的区域内显示。
我是想做一个网页上的聚焦栏，设计草图的时候是把图片放到一个圆角矩形里，在CSS里不知道怎么实现

Answer 1

1、控制背景重复：
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始举例如下：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

2、控制背景位置
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}

首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

Answer 2

正常的情况如果是嵌套的话也可以实现这样的效果，用图片做背景呗。

如果用img的话。无非就是用绝对定位。用z-index来控制显示的层次。

可以把具体的效果图贴出来，大家分析一下！希望能帮到你。

追答

谢谢

有问题继续交流

Answer 3

用相对定位和z-index应该能实现：把有特殊形状的区域图片做成png透明的背景图，放在最上层，另外一张显示的图片的图片绝对定位 显示在背景图的下一层

Answer 4

提供一个思路：
其中一张背景图片在ps里挖空成不规则特殊形状的并保存为png格式的，另一张图片使用相对定位并设置z-index负值，使之移到png背景图片下层，就能实现了.

Answer 5

圆角矩形，css3可以做到，
border-radius: 4px

将图片放在一个 div 里面，div 设置 border-radius: 4px; overflow: hidden

但是css3不支持 ie8 以下版本的浏览器哦