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>