Question

有没有办法拥有自定义形状的图像容器？要使用某些内容而不是<div />？

当我需要在#content-box（http://img855.imageshack.us/img855/8343/screenshot20111027at163.png）上添加角落时，会出现问题。角落图像仅使用块元素的一半，其余（粉红色alpha背景）阻挡其下方的活动元素。

有没有解决方法呢？

Answer 1

回答我自己的问题：

不可能有一个自定义形状的HTML元素，没有父块元素保留它，例如如果是SVG。

但是，我设法遇到的一种解决方法是神奇的CSS pointer-events规则，正如您可能已经猜到的那样，这有助于点击该元素。

pointer-events: none;

这确实解决了我的问题。

Answer 2

不可能有自定义形状的容器。您可以使用<div>包装器执行此操作，每个包装器包含不同的背景图像。例如：

HTML

<div id="content-wrapper">
    <div id="content-box">
    <!-- Upload photo content box --->
    </div>
</div>

CSS

#content-wrapper,
#content-box{
    width:500px;
    height:500px;
}

#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}

这样，图像不会阻止页面上的任何活动元素。

自定义形状图像容器

2 个答案: