svg用做背景图的几种方式

1. 直接使用

background: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g> <rect stroke="#000" transform="rotate(44.7 5,5)" height="6" width="6" y="2" x="2" stroke-width="0" fill="#f00"/></g></svg>') no-repeat 50% 50% / 100% 100%;

2. 转为base64后使用

background-image: url('data:image/svg+xml;base64,PCEtLSDlm77moIfvvJrmlofku7YgLS0+DQo8IS0tIDxz...');

3. 外置引用

background-image: url(test.svg);

svg用作背景图的更多相关文章

  1. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  2. 20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

    目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...

  3. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  4. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  5. 在Excel表里面插入背景图

    工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft ...

  6. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  7. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  8. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  9. texturepacker打包图片，场景切换时背景图有黑边

    在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...

随机推荐

  1. Windows中报错：Fatal error in launcher: Unable to create process using '"' 的解决方案

    Windows 下同时存在 Python2 和 Python3 使用 pip 时系统报错:Fatal error in launcher: Unable to create process using ...

  2. git 日常使用从入门到真香

    目录 git 日常使用从入门到真香 一.Git简介 二.Git常用命令 三.git操作流程 四.报错处理 git 日常使用从入门到真香 一.Git简介 Git是一个开源的分布式版本控制系统,可以有效. ...

  3. linux curl命令:curl: (7) couldn't connect to host ？

    linux curl命令:curl: (7) couldn't connect to host ? 使用linux命令 curl http://www.test.com 出现如下错误:curl: (7 ...

  4. pytorch contiguous的使用

    contiguous一般与transpose,permute,view搭配使用 即使用transpose或permute进行维度变换后,调用contiguous,然后方可使用view对维度进行变形. ...

  5. C语言关于++i，--i，i++，i--

    ++i 和--i 指的是先进行运算,再进行调用(运算符在前) i++和i--指的是先进行调用,再进行运算(运算符在后) 举例: int k,i=5;k=i++;//k得到5i=5;k=++i;//k得 ...

  6. poj 3977 子集

    题目 题意:在一个集合中找到一个非空子集使得这个子集元素和的绝对值尽量小,和绝对值相同时保证元素个数尽量小 分析:1.二分枚举的思想,先分成两个集合: 2.枚举其中一个集合中所有的子集并且存到数组中, ...

  7. Go语言基础之1--标识符、关键字、变量和常量、数据类型、Go的基本程序结构、Golang的特性

    一.前言 当我们项目较为简单时,我们在src目录下新建一个该项目目录,里面存放源码文件即可,见下图: 当我们一个项目较为复杂时,我们可以在src目录下新建一个该项目目录,在针对该项目不同模块创建不同目 ...

  8. java中double的四舍五入 BigDecimal

    转载:https://blog.csdn.net/xiaobing_122613/article/details/71077225 1. 功能 将程序中的double值精确到小数点后两位.可以四舍五入 ...

  9. .NET Core单元测试覆盖率统计coverlet配置和使用

    https://segmentfault.com/a/1190000017569492 需要使用: 使用 Moq 测试.NET Core 应用    https://www.cnblogs.com/c ...

  10. acm之奇葩数据输入专题

    1.每組测试数据都在一行,不知道每组测试数据的长度,以换行为测试数据输入的结束 关键代码:if (cin.get() == '\n')   {语句} 例如:找出每组测试的最大值: 输入: 3 1 4 ...