在理论开发中,有时候心愿文字内容能够作为背景图片显示,一方面是心愿利用背景图片的劣势,例如能够平铺,另外一方面是常见的替换元素不能应用伪元素创立文字,此时只能寄心愿与背景图。
要害如何把文字变成背景图呢?
通常 CSS 开发人员的做法是把文字导出来转换成图片,而后作为背景图显示,然而这样老本有些高,也不利于日后的保护。
这里给大家介绍一种实用的技术,能够让文字作为 CSS 背景图片。
一、SVG 实质上就是一个图像
SVG 尽管是 XML 语言形成的,然而实质上就是一个图像,是能够作为图像应用的,例如:
<img src="zhangxinxu.svg">
此时的 zhangxinxu.svg 就是一个图像,同样的,也能够作为背景图显示,例如:
.example {background: url(zhangxinxu.svg);
}
然而,这里的 SVG 文件都是独立的 SVG 文件,和把文字导出成 PNG 图片没有任何区别,基本没有意义嘛!
对的,请不必急,是这样的,SVG 作为一个矢量图像,和通常的位图有一点不一样,那就是 SVG 图像能够间接以源代码的形式内联在 Web 页面中。
例如上面是一段显示文本的 SVG 代码:
<svg xmlns="http://www.w3.org/2000/svg">
<text> 文字内容 </text>
</svg>
是能够间接作为 background-image
应用的,例如:
.by-zhangxinxu {background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text> 文字内容 </text></svg>');
}
因为安全性限度,目前须要对局部字符进行本义,因而,理论的 CSS 代码是这样的:
.exmaple {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E 文字内容 %3C/text%3E%3C/svg%3E");
}
相比 PNG 图像的文字背景,应用 SVG 内联的益处在于,咱们能够轻松批改文字的内容,同时咱们能够随便设置文字的字号大小,色彩、描边成果等等。
然而,每次都手写一段 SVG 代码好难哦,尤其很多前端小伙伴对 SVG 并不是很相熟。
不要紧,思考到这种状况存在,能够应用生成 SVG 文字背景图的工具。
二、SVG 文字背景图生成工具
您能够狠狠地点击这里:文字转 SVG 图像在线转换工具
界面截图示意如下:
最下面是配置区域,能够设置作为背景的文字内容,能够设置文字的色彩、透明度以及地位等信息。
两头是代码区,左侧是原始 SVG,能够点击图标下载 SVG 文件到本地;右侧是本义的能够间接内联应用的 SVG 代码,HTML 和 CSS 中均可内联应用。
最上面是预览区域。
如果须要其余配置项
理论开发中的需要是变幻无穷的,工具目前内置的配置项不肯定能笼罩所有的场景,此时能够这么解决,间接批改左侧文本域中的 SVG 代码,此时右侧的本义 SVG 代码会主动同步,例如,如果咱们心愿背景文字带有旋转成果,这样能够作为水印图片应用,则能够在曾经生成的 SVG 代码中的元素上设置 45 度旋转相干的代码。
一种办法是间接在 <svg>
元素上设置传统 DOM 元素的 CSS style 设置,例如:
另外一种办法就是 <text>
元素上应用 SVG 元素主动的 transform
属性进行设置,然而 SVG 中的 transform
变换坐标和 CSS 是很不一样的,间接 <text transform="rotate(-45)">
是不会有预期的旋转成果的,因为默认 SVG 的变换中心点是左上角,因而,设置 transform="rotate(-45)"
会让文字不可见。
<text>
元素也能围绕中心点变换有 2 个办法,一种是应用 translate()
函数先偏移、而后再旋转,而后在偏移还原,这种办法啰嗦了一点,另外一种办法就是应用 SVG 中 rotate()
函数的可选参数,也就是第 2 个参数,就是能够指定旋转的中心点坐标,这个个性 SVG 独有,Canvas 中是没有的。
代码演示如下截图所示:
其中,能够看到专门设置了 SVG 元素的 width
宽和 height
高,因为如果不设置,依照目前的 CSS background-size
的尺寸渲染标准,SVG 的尺寸会采纳容器的尺寸,rotate()
函数的第 2 个参数就须要设置为容器元素的宽高的一半能力让文字居中旋转。
三、文字背景图利用案例
这里抛砖引玉,举几个应用文字作为背景图的例子。
1. 水印
例如为避免截图,会给页面,或者聊天软件背景等减少文字水印。
相干 CSS 代码如下所示:
.target {background: url("data:image/svg+xml,%3Csvg width='200'height='200'xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25'y='50%25'font-size='14'fill-opacity='0.5'text-anchor='middle'dominant-baseline='middle'transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");
}
截图成果如下所示: