background:url的一点妙用

原创 2013年12月04日 10:07:44

最近WAP端需要实现挺多顶通广告、漂浮广告的东东,需求那边要求页面端实现不同的机型访问,显示不同的广告图片。很多人估计都会把所有图片都直接写成<img src="" />,通过css样式display来控制显示内容与否,这样做的好处是简单方便,坏处是所有图片都会加载,这在当今流量还比较珍贵的手机端显然不是个好的处理方式。后来我研究了其它网站的处理方式,发现他们大多是写在css中的,于是我写了几个demo并用firebug测试了下。

demo1:

<div style="display:none;background:url(http://static.youku.com/index/img/header/yklogo.png)"></div>

结果:页面加载的时候,这张图片正常加载

demo2:

<div style="display:none;”><div style="background:url(http://static.youku.com/index/img/header/yklogo.png)"></div></div>

结果:页面加载的时候,这张图片并未加载。在firebug里把display:none;去掉,图片才开始加载


由上面可以看出,demo2才是我们想要实现的效果。


转载地址:http://blog.csdn.net/kaosini/article/details/17113061

CSS中background:url(图片) 不能显示的问题

转:http://www.cnblogs.com/WhiteM/p/6083012.html CSS中background:url(图片) 不能显示的问题 刚刚...
  • pzasdq
  • pzasdq
  • 2017年01月07日 18:00
  • 284

background-image:url为空引发的两次请求问题

background-image:url为空引发的两次请求问题问题:昨天是在进行页面小功能开发的时候,一个简单的个人信息更新功能,更新的时候总是不成功,反而再更新之后,将原来有的信息都变成空了。但是在...
  • jsjhushilei
  • jsjhushilei
  • 2016年04月09日 00:36
  • 1937

Rerofit登录注册购物列表详情页购物车跳转订单

compile 'io.reactivex.rxjava2:rxjava:2.0.7' compile 'io.reactivex.rxjava2:rxandroid:2.0.1' c...
  • gh0708
  • gh0708
  • 2018年01月18日 11:13
  • 71

购物车(二)加减 删除

依赖 //okhttp compile 'com.squareup.okhttp3:okhttp:3.6.0' compile 'com.squareup.okio:okio:1.11.0' /...
  • xiaozi_11
  • xiaozi_11
  • 2018年01月18日 14:19
  • 22

第16课时 流程控制和运算符,字符串,数组,土豆网右下角悬浮导航效果

1.  流程控制和运算符 a)  判断(选择)语句 if语句 else else if 每次只能选一种 switch语句 switch穿透 b)  循环语句for while  ...
  • nupotian
  • nupotian
  • 2017年03月04日 09:14
  • 365

CSS中的background的详细属性

本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性。它们是: background-c...
  • springk
  • springk
  • 2013年01月23日 16:10
  • 32145

CSS中url()地址写法

HTML/CSS 绝对路径和相对路径     今天我们讲的是CSS的路径问题,什么绝对定位,相对定位,根路径之类的。     作为一个coder你肯定是知道什么是根路径的,那 【问题...
  • ShangQuan2012
  • ShangQuan2012
  • 2016年12月12日 20:12
  • 8783

前端插件日常问题 整理

1)luara图片轮播
  • Vanderm
  • Vanderm
  • 2016年09月01日 17:12
  • 988

ImageView的src和background的区别以及两者的妙用

一、ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是...
  • Buaaroid
  • Buaaroid
  • 2016年01月07日 13:57
  • 2151

background简写属性

CSS-background
  • zhuyunhe
  • zhuyunhe
  • 2015年05月15日 15:23
  • 851
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:background:url的一点妙用
举报原因:
原因补充:

(最多只允许输入30个字)