使用CSS添加SVG背景色

  这篇文章是关于CSS力量的系列文章中的第一篇。

文章系列:

  1. 着色SVG背景(本文)
  2. 下拉菜单

  CSS变得越来越强大,并且通过CSS网格和自定义属性(也称为CSS变量)等功能,我们看到了一些非常有创意的解决方案。有关CSS可以做什么的可能性仍在探索,使编写UI更简单,这是令人兴奋的!
  其中一个是我最喜欢的CSS功能之一:过滤器。让我们看一下如何使用过滤器来解决在使用SVG作为元素背景图像时可能遇到的问题。

css滤镜

   首先,让我们首先概述过滤器。它们包括以下功能:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

  使用SVG过滤器或WebGL着色器也可以实现这些效果,但CSS过滤器是以最节省浏览器的方式实现基本变换的最简单方法。因为它们是SVG滤镜效果的快捷方式,所以您还可以filter: url()在任何元素上使用并指定滤镜效果ID。

问题:编辑SVG背景

  我喜欢使用SVG(可缩放矢量图形)格式进行网页设计。SVG是一种出色的Web图像格式,由于它基于代码,因此可以提供高质量的响应和交互式内容。将SVG注入页面时,您可以访问其每个内部元素及其属性,从而允许您为它们设置动画,更新值(如颜色),并动态注入其他信息。SVG也是一种很棒的图标格式,尤其是图标字体,并且由于其高质量(想想:视网膜屏幕)和小图像尺寸(想想:性能)而在较小的UI元素中。


  我经常发现,当SVG用于这些较小的元素时,或者作为一个大的插图区域时,为了简单起见,它包含在背景图像中。这样做的缺点是SVG不再是您作为开发人员的控制范围。您无法调整SVG背景的单个属性(如填充颜色),因为它的处理方式与任何图像相同。这个颜色难题可以通过CSS的滤镜解决!

调整亮度

  我第一次发现SVG背景挑战是当我在一个网站上工作时,该网站上有社交共享图标的白色SVG图标,这些图标生活在确定与该应用程序匹配的背景上。当这些图标移动到白色背景上时,它们不再可见。您可以使用,而不是创建新图标,或更改标记以注入内联SVG filter: brightness()


  随着brightness过滤器,任何值大于1就可以让元素变量,任何值小于1就会让元素变暗。所以,我们可以使那些SVG元素变暗,反之亦然!

  我上面做的是创建一个dark类filter: brightness(0.1)。对于较暗的图标,您也可以执行相反的操作。你可以通过创建一个light类似的东西filter: brightness(100)或任何适合你需要的东西来减轻图标。

  带有填充颜色的图标#000,或者rgb(0,0,0)不会变亮。您需要具有大于0任何rgb通道的值。fill: rgb(1,1,1)具有很高的亮度值,例如brightness(1000),甚至brightness(1000)不适用于纯黑色。这不是浅色和白色的问题。

调整颜色

  我们现在已经看到了如何使用brightness()滤镜调整亮度和暗度值,但这并不总能让我们获得理想的效果。如果我们想在这些图标中注入一些颜色怎么办?使用CSS过滤器,我们可以做到这一点。一个小黑客是使用sepia过滤器一起hue-rotate,brightness和saturation创造我们想要的任何颜色。



  从白色,您可以使用以下混合物来获得上面的海军蓝,蓝色和粉红色:

See the Pen PywNQJ by Edwardvoon (@edwardsvoon) on CodePen.

  SVG只是多个过滤器的一个用例。您可以将其应用于任何媒体类型图像,GIF,视频,iframe等,并且支持也非常好:
  这个浏览器支持数据来自Caniuse,它有更多细节。数字表示浏览器支持该版本及以上版本的功能。

  最后一点是记住你的用户!过滤器无法在Internet Explorer中使用,因此请向所有用户发送可见图像(即,不要在白色背景上使用带有应用过滤器的白色SVG,因为您的IE用户将看不到任何内容)。此外,请记住使用替代文本进行图标可访问性,并且在您自己的应用程序中使用此技术将会很棒!

-------------本文结束感谢您的阅读-------------

本文标题:使用CSS添加SVG背景色

文章作者:Edwardvoon

发布时间:2018年09月29日 - 10:09

最后更新:2018年09月29日 - 17:09

原始链接:https://edwardvoon.github.io/2018/09/29/Colorizing SVG Backgrounds/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!