3

Как наложить подобную сетку на background используя css? Причем, не использовать изображение самой сетки поверх основного фона, а сделать её в виде кода.

До наложения:

введите сюда описание изображения

После наложения:

введите сюда описание изображения

Чтобы было более понятно, нужно наложить вот такую сетку:

введите сюда описание изображения

1
  • 1
    Как вариант можно попробовать наложить через псевдоэлемент (:after) и поставить позиционирование absolute раставив по всей ширине блока. Либо делать второй div в котором будет проделано тоже самое, то есть выставив пизиционирование и растянуть его.
    – MoloF
    25 апр 2019 в 8:40

2 ответа 2

2

В css свойство background-image поддерживает перечисление, просто задайте несколько бэкграундов через запятую.

Так же css поддерживает синтаксис при помощи которого можно "заинлайннить" svg в css:

body {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-2.5,0L5,7.5M0,-2.5L7.5,5' stroke='rgba(0,0,0,0.3)'></path></svg>")
    ,url(https://i.stack.imgur.com/ZO8xS.jpg);

}
 

ну и естественно то же самое можно провернуть с .png

1
.overlay {
    position: relative;
    z-index: 0;
.overlay:before {
        position: absolute;
        content: " ";
        background-image: url('//здесь путь к вашей сетке'),
        //если нужно - сделайте background-repeat: repeat-x
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
    }

HTML

<div class="overlay image" style="background: url("//здесь путь к вашей картинке") no-repeat center center;">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.