CSS镂空图片transition过渡初加载背景色块
来源:互联网 发布:unity3d灯光阴影闪烁 编辑:程序博客网 时间:2024/06/11 14:13
CSS镂空图片技术还有一个好处,就是由于我们的图标颜色是CSS属性控制的,因此,我们可以渐进使用transition实现过渡效果,让交互更细腻。
transition: background-color .25s;
然而,这种实现有一个致命的不足,就是CSS的加载和背景图片的加载不是同步的,尤其首次加载的时候,图片是异步的,具有明显的延迟,于是,我们会看到非常丑陋的色块在一瞬间出现了
content url图片与异步色块问题解决
OK, 大家如果观察过页面图片的加载,应该注意到这么个现象,就是如果图片没有通过HTML属性或者CSS值限定width
/height
宽高的时候,在浏览器get到图片的原始尺寸之前,图片占据的空间大小是0
. 我们如果刷新浪微博,会发现页面高度蹭蹭蹭地往上涨,就是这么个原因,这种不对图片限定尺寸的做法在网页布局中是不推荐的,因为,会造成页面布局重绘,影响加载性能。
但是,存在必有道理,在这里,我们就可以好好地利用图片为加载时候占据空间为0
的特性避免出现色块的问题,怎么解决呢?就是把元素的background-image
url
值变成伪元素的content
url
值;同时background-position
定位改成其他定位,如relative
定位,如下代码示意:
.icon { width: 140px; height: 140px; background: #c8c8c8 url(icon.png) no-repeat 0 -140px;}↓.icon { /* 注意,只设高度不设宽度 */ height: 140px; background-color: #c8c8c8; overflow: hidden;}.icon:after { content: url(icon.png); position: relative; top: -140px;}
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">id</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">a</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">href</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>javascript:<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type_li<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">i</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>icon_type icon_type_1<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">i</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>企业<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">a</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">a</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">href</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>javascript:<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type_li<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">i</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>icon_type icon_type_2<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">i</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>网店商家<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">a</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">a</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">href</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>javascript:<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type_li<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">i</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>icon_type icon_type_3<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">i</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>媒体<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">a</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">a</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">href</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>javascript:<span class="after" style="color: rgb(0, 68, 0);">"</span></span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>type_li<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">i</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204);">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119);">=</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>icon_type icon_type_4<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">i</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>其他组织<span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">h6</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">a</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);"></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255);">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153);">></span>
上面绿色注释“只设高度不设宽度”点出了实现的关键:
页面渲染流程如下,1. CSS加载;2. 对应DOM渲染,背景色出现;3.拉取DOM样式对应背景图片。
传统实现就是从2到3的时候出现了问题,图片从服务器重新请求,导致了时间差,出现了色块。而我们这里的实现就不一样,当我们背景色出现,但是图片未加载的时候,由于我们的CSS没有设置元素的宽度,加上图片未加载占据宽度为0的特性,于是,在2完成3即将进行的时候,我们整个元素的高度140px, 宽度0,宽度是0啊!这意味着什么,意味着元素看不见啊,也即是虽然有背景色,无奈尺寸为0,我们是看不出有一丝丝背景色的;然后等图片请求到,自然就填满了元素,背景色也被遮掉了。没有了时间差,于是,完美解决了色块出现的问题!
对图片有要求,即图片的宽度,显示按照图片宽度自适应的
以下简单例子:.a-wrap {
display: inline-block;
padding: 20px;
}
.i-bg{
transition: background-color 1s;
background-color: #0000FF;
display: inline-block;
height: 140px;
overflow: hidden;
}
.i-bg:after{
content: url(../img/icons-verify-type.png);
}
.i-bg.icon2:after{
top:-140px;
position: relative;
}
.i-bg:hover{
background-color:red;
}
<div class="">
<a href="#" class="a-wrap">
<i class="i-bg">
<!--<img src="../img/icons-verify-type.png">-->
</i>
</a>
<a href="#" class="a-wrap">
<i class="i-bg icon2">
<!--<img src="../img/icons-verify-type.png">-->
</i>
</a>
</div>
- CSS镂空图片transition过渡初加载背景色块
- CSS变换背景色镂空
- CSS背景色镂空技术实际应用及进阶
- CSS背景色镂空技术实际应用及进阶
- CSS过渡 && bootstrap transition
- css过渡transition
- CSS过渡效果:transition属性
- CSS transition的过渡效果
- 深入理解CSS过渡transition
- 深入理解CSS过渡transition
- 深入理解CSS过渡transition
- css 背景色渐变
- css渐变背景色
- 改变图片背景色
- 【CSS基础】css3 transition过渡属性<四>
- CSS属性之过渡(transition)属性
- div+css自适应背景色 div+css自适应背景色
- css背景色渐变详解
- irq-gic-v3.c之gic_of_init
- MYSQL解决select ... into outfile '..' mysql写文件权限问题
- 【Redis】Redis的Pipeline管道,批量操作,节省大量网络往返时间
- Python学习路线(针对具备一定编程经验者)
- JVM类型与模式[Java -version]
- CSS镂空图片transition过渡初加载背景色块
- 砍树 (Standard IO)
- Fibonacci
- 在一个类中的static代码块,代码块,构造方法执行顺序
- linux0.00 代码阅读笔记
- 二叉树的遍历
- 邮箱激活账号与忘记密码
- POJ 3744(矩阵概率dp)
- 连续子数组的最大和