css3 背景图片 background-size

来源:互联网 发布:微信cms系统源码 编辑:程序博客网 时间:2024/04/25 11:50

一.效果:图标和文字一起在块的 中间


想要做一个上图一样的效果,要求:客服+图标在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;}

好处是:不用考虑图片的大小

0 0
原创粉丝点击