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 d，但低於內容的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); 
} 

要以對角線這樣做只是改變形象是一個對角線，可以平鋪