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

最新推荐文章于 2024-05-13 19:11:15 发布
最新推荐文章于 2024-05-13 19:11:15 发布
阅读量2.5k 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44663675/article/details/125233873
版权

代码

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文件的方式。

教练 我想学编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
svg使用 element plus 使用外部下载的svg，使用或作为背景图片的使用方式，svg背景填充自适应父级宽高
oMangGuoBuDing1的专栏
06-04 200
【代码】elementplus 使用外部下载找的svg，使用或作为背景图片的使用方式。
CSS background-position、clip-path 和 SVG Sprites 小图标生成方法
小王的技术库
01-03 511
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
修改作为背景的 svg 颜色
最新发布
qq_43202700的博客
05-13 340
顺便，如果还想修改 size 的话，直接在 fill 属性前加上 width='20' height='20' 即可。由于需要使用 svg 作为 background，所以 css 的 color 属性无法改变 svg 的颜色。注意，主要是修改 fill='%23000000'，由于。中不能包含空格，所以在。属性的值中，颜色代码。的 URL 编码）。
前端：background-image引入svg图片背景浅析
Pain4Dawn的博客
12-06 2万+
前端：background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片，之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放，拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时，发现了不一样的结果...
使用SVG图形
米斯木的博客
05-08 541
实际上，SVG代码可以绘制包括圆形、矩形、路径、文字等在内的任何形状，您可以在SVG元素中嵌套其他元素以创建更复杂的图形。除了嵌套元素，您可以通过在 SVG 元素中设置属性来应用不同的样式和表现。此时，您可以像导入 JPG 或 PNG 文件一样使用该标签，只需将文件路径指向 SVG 文件即可。您可以直接将 SVG 代码插入到 HTML 代码中的HTML标签中，然后在 CSS 样式表文件中用类或ID选择器应用样式。SVG代码是指在网页或应用中直接以SVG语言编写出的图形代码。属性定义了 SVG 图形的尺寸；
css background动态图片,如何动态更新CSS background属性中的SVG图形
weixin_28933027的博客
08-04 773
JavaScript语言：JaveScriptBabelCoffeeScript确定var iStart = new Date();var fast = 10,slow = 1;var bg = "url(\"data:image/svg+xml;utf8,\")";var bgs = " %w% %h%";var w = 99,h = 80,cw = 99,ch = 80,_bg, _bgs, ...
【CSS】SVG图片转background-image背景图片
大白菜啊
05-08 3098
由于不想把图片上传到服务器，占用服务器的空间。想直接嵌入网页中，应该怎么处理？ 在网卡搜索SVG转background-image图片关键字搜索出来的工具都不能用， 有搜到的也是类似这种 .element { background-image: url(/images/image.svg); } 我想，这都已经把图片上传到服务器了，那设置成背景色那不是很简单吗？ 我需要的是不上传图片，直接设置成背景色 然后东找西找真让我找到了一个工具，上传图片后可以转成 base64编码，再将base64编码转成ba
CSS3 SVG水气泡背景特效.zip
10-10
在这个案例中，水气泡背景特效就是通过SVG来定义形状和路径，再用CSS3的动画属性来控制其动态变化，如气泡的上升、大小变化、透明度调整等，从而创造出逼真的水底气泡浮动效果。 CSS3引入了许多新的选择器、布局...
CSS3 SVG斑点动态背景图特效.rar
10-01
标题中的“CSS3 SVG斑点动态背景图特效.rar”揭示了我们要探讨的核心技术：CSS3和SVG。CSS3是层叠样式表的第三个版本，它引入了许多新的特性和功能，让网页设计更加丰富和动态。SVG，全称Scalable Vector Graphics，...
CSS3 SVG渐变网页动态背景特效.rar
10-01
【标题】"CSS3 SVG渐变网页动态背景特效.rar"是一个包含使用CSS3和SVG技术实现的网页背景动态渐变效果的资源包。这个特效代码能够为网站增添视觉吸引力，提高用户体验，同时允许用户根据需求进行二次修改，以适应...
CSS3 SVG卡通美食图案背景特效.zip
10-08
总之，“CSS3 SVG卡通美食图案背景特效”是一个结合了现代Web技术的创新设计实践，利用jQuery的便利性，CSS3的动画功能，以及SVG的矢量优势，为网页背景带来独特而吸引人的视觉体验。无论你是网页设计师还是前端...
css3 svg逼真水滴特效.zip
10-09
在网页设计领域，CSS3和SVG（可缩放矢量图形）是两个强大的工具，能够创造出令人惊叹的视觉效果。本教程将详细讲解如何利用CSS3和SVG技术制作逼真的水滴特效，以及如何进行二次修改以适应不同的网页需求。 首先，...
优化网站性能之：用纯CSS漂亮背景来代替图片背景，效果美加载快
零久的博客
03-12 179
使用纯css来创建漂亮的背景，确实是一种提升网站性能的有效方法。相比于使用图片作为背景，css背景不仅加载速度更快，还能减少服务器的带宽负载，同时提供了更多的灵活性和可定制性。通过巧妙地使用css来创建背景，你可以在不牺牲视觉效果的前提下，显著提升网站的加载速度和性能。使用css的background-image属性和svg图案可以创建复杂的图案背景。css动画和过渡可以用来创建动态的背景效果，增加网站的互动性和趣味性。css3引入了渐变背景的功能，允许你创建线性或径向的渐变效果。css变量示例：css。
【CSS】2018- 不一样的SVG！SVG在 CSS 中的应用
pingan8787
04-16 108
介绍一些你可能没用过的SVG小技巧。在平时开发中，很多时候都会用到SVG。大部分情况我们都不必关注SVG里面到底是什么，直接当成图片资源引入就行，比如常见的图标资源我们可以通过多种方式使用这个特殊的图片<img src="a.svg">.icon{ background: url("a.svg") }甚至直接放到HTML中<div> <svg> ....
CSS插入背景图片并且充满整个容器
小太阳的博客
08-30 3178
先上图，需要实现下面这种样式 引入背景图 height: 36px; background: url('~static/assets/img/warn_border.svg') no-repeat; background-size: 100% 100%; 发现并没有被撑开 后来把background-size改为了cover才可以 background-size: cover; 下面介绍background-size使用语法 length：设置背景图像的高度和宽度。第一个值设置宽度，
用SVG做background image
weixin_34018202的博客
09-09 3278
1 用utf8格式， 需要双引号“”替换为单引号，而且采用url encode编码，例如# 替换为 %23， body { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1...
如何在 CSS 背景图片中对 SVG 图片进行着色 ，修改svg图片颜色
热门推荐
PromiseCao的博客
10-22 2万+
在CSS背景图片中使用SVG的优点 在CSS背景图片中使用SVG，可以使用css background属性的诸多特性，比如图片尺寸和图片位置等等。可以非常轻松的根据设备的尺寸来控制图片的尺寸，还有一个好处就是可以不用把SVG图片插入到html中，从而保持html的整洁。 在CSS背景图片中使用SVG，有很多的优点，对提高性能也是有很大帮助的。那在CSS背景图片中使用SVG，有什么方法来改变它...
我至今没想到，我也能在 CSS 中实现 SVG 动画了
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
08-14 2297
动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。本篇文章我们就来一起学习学习如何在 CSS 中实现 SVG 动画。
几种生成css背景图的方式
qq_42880714的博客
07-15 1447
几种生成css背景图的方式
css修改svg图形背景色_使用CSS样式化可缩放矢量图形（SVG）
06-09
要修改SVG图形的背景色，可以使用CSS样式。以下是一些方法： 1. 在SVG代码中添加样式属性：可以在SVG代码中添加样式属性来修改背景颜色。例如： ``` <svg width="100" height="100"> <rect x="0" y="0" width="100" height="100" style="fill: #f00;" /> <circle cx="50" cy="50" r="40" /> </svg> ``` 在上面的代码中，我们使用`<rect>`元素创建一个矩形，并使用`style`属性将其背景颜色设置为红色。 2. 使用CSS选择器：可以使用CSS选择器来选择SVG元素，并为其添加样式。例如： ``` <style> #background { fill: #f00; } </style> <svg width="100" height="100"> <rect id="background" x="0" y="0" width="100" height="100" /> <circle cx="50" cy="50" r="40" /> </svg> ``` 在上面的代码中，我们使用CSS选择器`#background`来选择`<rect>`元素，并将其背景颜色设置为红色。 3. 使用外部CSS文件：可以将SVG代码保存在一个单独的文件中，并使用外部CSS文件来为其添加样式。例如： ``` <!-- SVG 文件：background.svg --> <svg width="100" height="100"> <rect id="background" x="0" y="0" width="100" height="100" /> <circle cx="50" cy="50" r="40" /> </svg> <!-- CSS 文件：style.css --> #background { fill: #f00; } ``` 在上面的代码中，我们将SVG代码保存在`background.svg`文件中，并将样式保存在`style.css`文件中。通过将`style.css`文件链接到`background.svg`文件中，我们可以为SVG添加样式。 无论使用哪种方法，都可以通过修改`fill`属性来修改SVG元素的背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值