学习记录596@CSS用svg做背景

代码

background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")

展示出来的效果

最开始看到这个代码的时候是懵逼的，其实大概意思是背景图片使用了svg，并且这个svg是用base64加密的，我们用base64解密工具将第三个参数的那串字段解密，发现就是svg

<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="a" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M0 10h40M10 0v40M0 20h40M20 0v40M0 30h40M30 0v40" fill="none" stroke="#e0e0e0" opacity=".2"/><path d="M40 0H0v40" fill="none" stroke="#e0e0e0"/></pattern></defs><rect width="100%" height="100%" fill="url(#a)"/></svg>

在菜鸟教程中在线编辑器中展示：

如果不用这种方式在背景中使用svg，就用引入svg文件的方式。

学习记录596@CSS用svg做背景相关推荐

前端学习记录（CSS篇）
CSS Cascading Style Sheet,层叠样式表,将网页内容和显示样式分离,提高程序性能. 它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小.颜色.以及元素的 ...
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位居中水平居中垂直居中水平垂直居中浮动现在我们想在页面中 ...
css学习记录三：文本属性
css学习记录三:CSS文本属性一.文本属性的作用二.文本颜色三.文本对齐四.装饰文本五.文本缩进六.行间距一.文本属性的作用 CSSS Text(文本)属性可定义文本的外观,比如文本的 ...
WEB开发零基础到入门之HTML+CSS(学习记录)
序言之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭:所以就放弃了用个人站记录的想法,关于这里简单说明下 ...
如何使用 CSS 为 SVG 制作动画：示例教程
8 分钟阅读编者注:本文最后更新于 2022 年 7 月 12 日,以包含更多示例. Web 动画是一种乐趣,它通过提供视觉反馈.引导用户完成任务以及使网站整体变得活跃来改善用户体验.有几种方法可以 ...
寒假中前端学习归档html/css
寒假中前端学习归档html/css 001blog: <!DOCTYPE html> <html><head><meta charset="utf- ...
html svg 颜色,通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

学习记录596@CSS用svg做背景

代码

展示出来的效果

学习记录596@CSS用svg做背景相关推荐

最新文章

热门文章