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内容的元素.这样,它不会掩盖你的文字.