Смешиваем картинку с фоном

Шахматная доска

Создадим участок шахматной доски из двух квадратов по диагонали (chessboard.svg).

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <g fill="#ccc">
        <rect width="25" height="25" />
        <rect x="25" y="25" width="25" height="25" />
    </g>
</svg>

Он будет выглядеть следующим образом.

Добавим стили CSS, указав в качестве фона созданный SVG-файл и любую картинку. Затем применим наложение:

.grid {
  background-image: 
    url(chessboard.svg),
    url(http://user.alexanderklimov.ru/android/android.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}

Картинка будет растянута на всё пространство элемента, паттерн шахматной доски будет повторяться каждые 100 пикселей по горизонтали и вертикали. Режим overlay смешает две картинки.

Узор в горошек

По такой же схеме можно создать узор в горошек. Создаём нужный паттерн из пяти кругов. Один круг разместим точно в центре SVG viewBox, остальные в углах (polka_dot.svg).

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
    <style type="text/css">
        circle { fill: #f99; }
    </style>
    <circle cx="0" cy="0" r="80"/>
    <circle cx="300" cy="0" r="80"/>
    <circle cx="0" cy="300" r="80" />
    <circle cx="300" cy="300" r="80"/>
    <circle cx="150" cy="150" r="80"/>
</svg>

Настроим CSS.

.polka {
    background-image: 
        url(http://user.alexanderklimov.ru/android/android.jpg),
        url(polka_dot.svg);
    background-size: cover, 100px 100px;
    background-blend-mode: multiply;
}

В этот раз используем режим multiply.

Вернуться в раздел SVG в качестве фонового рисунка.

Реклама