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

Чтобы сделать это с диагональной линией просто изменить изображение, чтобы быть диагональную линию, которая может быть плиточный