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. Java框架之Java Bean

    链接 知乎https://www.zhihu.com/question/19773379 总结 符合一定规范的编写的Java类,不是一种技术,而是一种规范.大家对于这种规范,总结了很多开发技巧,工具函 ...

  2. springboot jpa mongodb 整合mysql Field in required a bean of type that could not be found Failed to load ApplicationContext

    1.完整报错 *************************** APPLICATION FAILED TO START *************************** Descripti ...

  3. 老男孩Day7作业：选课系统

    1.作业需求:角色:学校.学员.课程.讲师 1. 创建北京.上海 2 所学校 2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开 3. 课程包 ...

  4. 5分钟构建无服务器敏感词过滤后端系统（基于FunctionGraph）

    摘要:开发者通过函数工作流,无需配置和管理服务器,以无服务器的方式构建应用,便能开发出一个弹性高可用的后端系统.托管函数具备以毫秒级弹性伸缩.免运维.高可靠的方式运行,极大地提高了开发和运维效率,减小 ...

  5. 洛谷1541（多维dp）

    走格子拿分数,直接弄dp[i]是到了第i格的最大得分可以发现是假的. 于是此题设f[i][j][k][t]代表四种步伐各用了几次可以得到的最大得分,到达的点可以直接算出来,就好转移了. const i ...

  6. 优先队列priority_queue的简单应用

    优先队列 引入 优先队列是一种特殊以及强大的队列. 那么优先队列是什么呢? 说白了,就是一种功能强大的队列. 它的功能强大在哪里呢? 四个字:自动排序. 优先队列的头文件&&声明 头文 ...

  7. Helvetic Coding Contest 2016 online mirror A1

    Description Tonight is brain dinner night and all zombies will gather together to scarf down some de ...

  8. java的Spring学习2--构造函数注入

    bean文件如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi=" ...

  9. css兼容写法

    css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼 ...

  10. IP 地址子网划分

    1.1 IP地址子网划分 1)容易造成地址浪费 2)容易产生严重的广播风暴 3)会造成路由器转发压力过大 1.2     庞大的网段需要进行子网划分 1)可以有效避免地址浪费 2)有效减少广播风暴的产 ...