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. js流程控制；常用内置对象

    一.流程控制 1.if .if-else.if-else if-else var ji = 20; if(ji >= 20){ console.log('大吉大利,晚上吃鸡') } alert( ...

  2. UVA11270 Tiling Dominoes

    \(\color{#0066ff}{ 题目描述 }\) 给定一个m×n的矩形网格,用1×2多米诺骨牌完全平铺. 请注意,即使一个平铺的旋转与另一个平铺相匹配,它们仍算作不同的平铺. 下面显示了一个平铺 ...

  3. kuangbin专题十六 KMP&&扩展KMP HDU2609 How many (最小字符串表示法)

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...

  4. http 与 TCP 与 socket 定义,区别

    http://blog.csdn.net/jenminzhang/article/details/47017741 http协议:处于互联网协议的应用层,角色是规定数据传输的格式,http是建立在so ...

  5. react常用开发工具

    https://www.cnblogs.com/vipstone/p/7125338.html

  6. Redis学习笔记（3）—— 五种数据类型&keys的通用操作

    一.Redis数据结构介绍 redis是一种高级的key-value的存储系统,其中的key是字符串类型,尽可能满足如下几点: 1)key不要太长,最好不要操作1024个字节,这不仅会消耗内存还会降低 ...

  7. CodeForces - 984C——Finite or not?分数整除问题（数论，gcd）

    题目传送门 题目描述:给你一个p/q,让你求在b进制下,这个小数是不是有限小数. 思路: 先来膜拜一个大神的博客,如何求小数的二进制表达,(感谢博主肘子zhouzi).然后小数的其他进制表达也一样. ...

  8. POJ 3067 Japan (树状数组 && 控制变量)

    题意: 西海岸和东海岸有分别有n (1~n)个和m (1~m)个城市, 两个海岸的城市之间有k条公路连通, 公路会相交, 现在给出城市和公路的信息问你由这些公路组成的复杂交通有多少个交点 (如果两个条 ...

  9. java nio 之MappedByteBuffer

    其实掌握MappedByteBuffer并不难,只要记住"三方三法三特性"(我自己总结的,呵呵~~不要扔鸡蛋哦...)这句话就可以轻松搞定!MappedByteBuffer 只是一 ...

  10. Android 选择本地图片的demo

    https://github.com/lipanquan/SelectLocalPhoto