css 任何元素都可以加背景图
2012-08-16 22:02
225 查看
任何元素都可以加背景图,这是今天国新教会的。
有了这个我们可以做什么呢?
1. 一张大图,上面有一个小图标就我们想显示的,作为input校验正确后的提示
用img也可以用css sprites,但是不给img加src的话,你的img中间还会有个小图片,而且img的边框尝试许久也去不掉
还有一点,没有src的img,虽然在css里设置了width,height,但在FF里却因为没有width不显示,IE下显示,世界真奇妙
其实可以将图片作为span的背景,避免了以上两个问题。
。。。本来是想用span的,行内元素的inline-block更强大一些,但不知道博客园的html编辑里为什么不让用span。
为什么不切个图直接用img呢?因为本人不会用ps,有什么资源就是什么资源。而且如果是一个校验信息的span里的内容,反复的加载一个img元素会不会有流量呢?这个暂时不考虑吧。span里加一个无边框的img,你试过吗?
2. 我们还可以为图片设置背景图片,这有什么用?
我们可以把一张较小的图片作为用户的默认头像,等分辨率高的用户头像加载完成后再显示高清头像。
一点小思考,不足一啃,欢迎批评指导
有了这个我们可以做什么呢?
1. 一张大图,上面有一个小图标就我们想显示的,作为input校验正确后的提示
用img也可以用css sprites,但是不给img加src的话,你的img中间还会有个小图片,而且img的边框尝试许久也去不掉
还有一点,没有src的img,虽然在css里设置了width,height,但在FF里却因为没有width不显示,IE下显示,世界真奇妙
其实可以将图片作为span的背景,避免了以上两个问题。
span.rightImg{ vertical-align:middle; display:inline-block; width:90px; height:20px; background:url() no-repeat x y; }
。。。本来是想用span的,行内元素的inline-block更强大一些,但不知道博客园的html编辑里为什么不让用span。
为什么不切个图直接用img呢?因为本人不会用ps,有什么资源就是什么资源。而且如果是一个校验信息的span里的内容,反复的加载一个img元素会不会有流量呢?这个暂时不考虑吧。span里加一个无边框的img,你试过吗?
2. 我们还可以为图片设置背景图片,这有什么用?
我们可以把一张较小的图片作为用户的默认头像,等分辨率高的用户头像加载完成后再显示高清头像。
一点小思考,不足一啃,欢迎批评指导
相关文章推荐
- 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8
- 初识CSS--常用元素总结(四)-边框与背景
- CSS控制元素背景透明度总结
- CSS哪些样式属性不可以被子元素继承?
- CSS元素背景透明
- 元素背景透明的css设计
- css背景透明子元素不透明
- css元素背景图片自适应屏幕大小
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
- CSS设置元素背景透明,其内的文字不透明
- css实现纯文字内容元素透明背景(兼容IE6)
- gif可以当成css的背景图片与普通图片是一样的
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- css 背景图片自适应元素大小
- CSS如何只改变父元素背景透明度不改变子元素透明度
- CSS 设置背景透明度,不影响子元素
- CSS背景、尺寸、显示、盒子模型以及元素的定位
- css 设置元素背景为透明
- CSS如何只改变父元素背景透明度不改变子元素透明度
- jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了