css3 背景图片 background-size
2016-01-13 18:33
609 查看
一.效果:图标和文字一起在块的 中间
想要做一个上图一样的效果,要求:客服+图标在btn的中间。
二.解决方法:
方法有很多,这里说一个简单的方法来让图片和文字一起居中对齐(方法可拓展,之后会尝试在移动端使用css sprite来做小图片的集合,虽然现在有很多方法可以集合或不使用小图片,eg: 1.图片base64 -- 不使用图片,而是将图片转化成一串字符串,其实这里也用了这样的方法;2.使用一些web 字体Icon。。。等等,这里先不说那么多了哈);
对当前span元素添加:
这里的图片地址就是base64转化的
对外层div添加:
好处是:不用考虑图片的大小
想要做一个上图一样的效果,要求:客服+图标在btn的中间。
二.解决方法:
方法有很多,这里说一个简单的方法来让图片和文字一起居中对齐(方法可拓展,之后会尝试在移动端使用css sprite来做小图片的集合,虽然现在有很多方法可以集合或不使用小图片,eg: 1.图片base64 -- 不使用图片,而是将图片转化成一串字符串,其实这里也用了这样的方法;2.使用一些web 字体Icon。。。等等,这里先不说那么多了哈);
对当前span元素添加:
span { padding-left: 25px; background-repeat: no-repeat; background-size: contain;}
span{background-image: image-url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgRmlyZXdvcmtzIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNzhDREIzQ0IxRjExMUU1OUQ2NEU5OEU4NDhGMDdGNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNzhDREIzREIxRjExMUU1OUQ2NEU5OEU4NDhGMDdGNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0RDRFNDc1QjFFODExRTU5RDY0RTk4RTg0OEYwN0Y3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ0RDRFNDc2QjFFODExRTU5RDY0RTk4RTg0OEYwN0Y3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eTAmZQAAAP5JREFUeNrElVEVwyAMRUsNrBKQUAmVUAmVUAmVMAlIQEIlVMIkMAUsnPHB2GigCeydk7+QW9Lw0nVe1toJwti3DoihqyUovthv1YFCURncLJaqAbzbc23cwIfFtXACc+RaPnLwhKuWmfuEkEIIQwH2Bbk3CHJr+8L8oTVQt5pSvkmFQnvrZ7EisLWGtSVVy7z3Ju1EtkXoMrIG9Gxa+VcVckunHTk/+BoT5xPRv27qYUeUN1OXcdheGZ3Tqa6gW8Z9Wea6mn2+IhtHxv+8IoVB1T+gGzcx97kYJp7JfS5jNPZXtZaaA6XFmrJdSgdKk60xsDKVaLfxoA+rewkwAMnw/AIaVzJAAAAAAElFTkSuQmCC'); }
这里的图片地址就是base64转化的
对外层div添加:
div{text-align:center;}
好处是:不用考虑图片的大小
相关文章推荐
- css3溢出文本属性------text-overflow
- 让IE6支持兼容min-width、max-width CSS样式属性的方法
- div+css的绝对定位
- 如何获取内联样式的width值
- css中div高度自适应
- CSS学习笔记
- CSS中的三种基础选择器,
- Css中控制当鼠标滑过<li>元素时,显示它里面的<ul>元素
- 彻底弄懂css中单位px和em,rem的区别
- CSS中margin和padding的区别
- CSS3新增样式大解析:[8]animation之元素动画
- CSS绘制三角形
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
- 表单标签动画(CSS)
- CSS+DIV之强化background属性
- CSS中强大的EM
- CSS值得关注的那些事?
- CSS值得关注的那些事?
- css3 中的filter使用
- wpf 样式继承