Question

我正在尝试创建一个中间有透明圆圈的方形div。在这个div后面会有一个图像，透明的圆圈将作为一个窗口＆＃39;到后面的这个图像。

这是我尝试过的，没有成功：

<div style="width:100%; height:550px; float:left; background:#aaa;">
    <div style="width:250px; height:250px; margin:150px auto; border-radius:125px; background:transparent; border:1px solid #000;">
    </div>
</div>

我很欣赏有关如何完成此任务的任何建议

提前致谢

Answer 1

他们正在使用背景图片

http://caavadesign.com/wp-content/themes/caava/img/section1_mask.png

Answer 2

这绝对可以在css中完成，只需创建一个圆圈并将background-position设置为fixed：

.window{
  background: url("http://upload.wikimedia.org/wikipedia/commons/5/52/New_York_Midtown_Skyline_at_night_-_Jan_2006_edit1.jpg") center no-repeat fixed;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

FIDDLE

更新您的CSS：

NEW FIDDLE

在中间创建一个带有透明圆圈的方形黑色div

2 个答案: