svg背景

In the previous article I introduced using SVG in a tiled background images for web pages. Those simple stripes and lines can be expanded to more complex shapes, mixed with blend modes and bitmap images to create layered “pop art” backgrounds. These techniques allow for richer visual effects with easier code and more flexibility than my previous attempt using CSS gradients.

在上一篇文章中，我介绍了在网页的平铺背景图像中使用SVG的方法 。 这些简单的条纹和线条可以扩展为更复杂的形状，并与混合模式和位图图像混合以创建分层的“波普艺术”背景。 与我以前使用CSS渐变的尝试相比，这些技术可以通过更轻松的代码和更大的灵活性提供更丰富的视觉效果。

棋盘 (Checkerboard)

Creating an SVG checkboard is a matter of using just two square elements in a diagonal arrangement:

创建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>

This creates a pattern like so:

这将创建一个像这样的模式：

Layered with a bitmap image:

用位图图像分层：

section#grid {background-image: url(checkerboard.svg),url(grace-kelly.jpg);background-size: 100px 100px, cover;background-blend-mode: overlay;
}

… creates the first effect shown above. The bitmap image is sized to cover the area of the element; the checkerboard pattern repeats every 100 pixels, both horizontally and vertically. But rather than simply layering over the image, it blends with it in overlay mode.

…创建上面显示的第一个效果。 调整位图图像的大小以覆盖元素的区域； 棋盘图案在水平和垂直方向上每100像素重复一次。 但是，它不仅仅是在图像上分层，而是以overlay模式与图像融合。

圆点 (Polka Dots)

A similar idea can be used to pattern images with polka dots, using five SVG circles: one in the exact center of the SVG viewBox, and the remaining four with their centers at each corner:

使用五个SVG圆可以使用类似的想法来图案化带有圆点的图像：一个在SVG viewBox正中央，另一个在每个角的中心：

<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="100"/><circle cx="300" cy="0" r="100"/><circle cx="0" cy="300" r="100" /><circle cx="300" cy="300" r="100"/><circle cx="150" cy="150" r="100"/>
</svg>

Which creates this pattern:

创建此模式：

This code is saved as circle-grid.svg and layered with a bitmap image in the background of an element:

这段代码保存为circle-grid.svg并在元素的背景中分层circle-grid.svg了位图图像：

section#circles {background-image: url(kelly-brook-as-gilda.jpg),url(circle-grid.svg);background-size: cover, 100px 100px;background-blend-mode: multiply;
}

结论 (Conclusion)

This should give you some idea as to how to proceed with your own ideas; there are many more possibilities for these kinds of designs, which I’ll explore in future articles.

这应该使您对如何继续自己的想法有所了解； 这些类型的设计还有更多的可能性，我将在以后的文章中进行探讨。

翻译自: https://thenewcode.com/1047/Pop-Art-Backgrounds-with-SVG-Blend-Modes

svg背景