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

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

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