Question

我不知道效果的名称，但这是一个例子： http://www.uiueux.com/wp/flowfolio/

如果你仔细观察，那么你会看到一个干净的背景图像，因为它看起来是第二个背景 - 带点。点不是图像的一部分。

这个效果的名称是什么？
如何用点创建这样的背景？
这也可以用对角线而不是点来完成吗？

非常感谢！

Answer 1

它只是一个小的，半透明的背景图像，在背景图像上平铺：

http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png

您只需创建一个元素并将其拉伸到背景上：

#dots {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image: url('dots.png');
    z-index: 1;
}

确保元素的z-index高于背景的z-index，但低于内容的z-index。这样，它就不会掩盖你的文字。

Answer 2

该网站使用具有透明背景的div。所以它是页面上的一个背景，其上重复了另一个背景。

<div class="back_mask"></div>

.back_mask {
    z-index: -990;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(img/bg_mask.png);
}

Answer 3

其他人打败了我，但它只是一张位于另一张图像上的图像。

这是我的图像解决方案

HTML

<div class="dots">
  <img src="http://placekitten.com/300/300" />
</div>

CSS

.dots {
  position: relative;
  display: inline-block;
}
.dots:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png);
}

要使用对角线进行操作，只需将图像更改为可以平铺的对角线

CSS：如何在背景图像上创建线条或点？

3 个答案: