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
- css3 背景图片 background-size
- CSS3:background-size背景图片尺寸属性
- CSS3 background-size属性
- css3 background-size 用法
- css3 background-size
- CSS3 Background-size
- CSS3-background-size
- CSS3 Background-size 详解
- css3中的background-size
- 【CSS3】background-size
- CSS3 背景 background-size
- CSS3 background-size 属性
- CSS3:background-size属性
- CSS3 Background-size
- CSS3 Background-size 详解
- CSS3 background-size 属性
- CSS3-background-size
- 【CSS3】---background-origin background-clip background-size
- XenServer利用快照功能不停机迁移VM至其他节点
- HIVE导出到HDFS没有分割符解决方案
- 词组缩写
- error: C1083: 无法打开包括文件: “QWebView”
- SVN常用命令之commit(checkin是不存在的)
- css3 背景图片 background-size
- springandstruts2整合
- js如何判断函数或者方法中的this指向谁?四句话
- linux每天习惯一个命令之cp
- 软件测试_BadBoy自动化测试工具5_参数化Add Variable
- iOS开发之UIGestureRecognizer
- MySQL 数据库主从复制架构
- [DeepLearning]Unsupervised feature learning for audio classification using convolutional deep belief
- 说说ToolBar以及仿QQ没网络提示的实现