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

Question

我不知道这种效果的名称，但这里有一个例子：http://www.uiueux.com/wp/flowfolio/ 如果你仔细观察，你会看到一个干净的背景图像，似乎还有一个第二个背景，上面有点。这些点不是图像的一部分。

以下是需要回答的问题：

1. 这种效果的名称是什么？ 2. 如何创建带有点的这种背景？ 3. 是否可以用斜线代替点来实现这种效果？

非常感谢！

- Arjen

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。这样，它就不会盖住您的文本。

- Blender

---

OP，请确保您的 z-index 正确无误。 - Jonathan

哇，就像一个像素点一样哈哈。 - jackcogdill

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);
}

- MushinNoShin

---

+1，如果使用了实际页面上的源代码。 - Cameron

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);
}

要使用对角线实现它，只需将图像更改为可平铺的对角线即可。

- georgephillips