FIDDLE

Question

.overlay{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

我的背景图片是整个页面的叠加层。我想用覆盖图像周围的白色填充页面的其余部分，但不在其中。

我用它在屏幕中间构图。

这个想法是页面可以是背景图像背后的全彩色，并且由于边框或图像周围的任何东西而仍然是不可见的。

Answer 1

如果您知道图片的大小，这是一种将图像置于中间的简单方法：

<强> HTML：

<div id="container">
    <img id="placekitten" src="http://placekitten.com/g/200/300">
</div>

<强> CSS：

#placekitten {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -100px;
    z-index: 9000;
}
#container {
    height: 500px;
    border: solid black 1px;
}

关键是让margin-top等于-1 * height/2而margin-left等于-1 * width/2。但是，您必须手动设置这些值才能使其正常工作。

FIDDLE

Answer 2

不要真正理解你需要什么，但我认为这会有所帮助

使用拉伸技术：

.overlay{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(hex-shape.png) no-repeat center;
  z-index:99999;
}

使用顶部，左侧，右侧，底部值

Answer 3

.overlay{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: #{your_color} url(hex-shape.png) no-repeat center;
  z-index:99999;
}

在我的图像周围创建填充页面的边框

3 个答案:

FIDDLE