在上一篇文章中我们介绍了4种常用的使用CSS来隐藏和显示元素的方法。这篇文章中,我们要介绍4种更为高级的显示和隐藏元素的方法,这些方法只工作在最新版本的现代浏览器中,有一些方法IE浏览器是不支持的。下面是我们在这篇文章中的DEMO所使用的HTML结构。
< figure id = "oymyakon" > < img src = "img/nastya.jpeg" alt> < figcaption >Nastya, photographed by Sean Archer</ figcaption > </ figure > < div id = "content" > < div > < p >Located deep in Siberia...</ p > < p >From December to February...</ p > < p >The extreme conditions are...</ p > < p >Surprisingly, summers in Oymyakon...</ p > </ div > </ div > |
基本的CSS样式如下:
body { color : #fff ; background : url (px.png) #333 ; line-height : 1.4 ; font-size : 1.1 rem; } figure#oymyakon { float : right ; width : 50% ; font-size : 0 ; } figure#oymyakon img { width : 100% ; height : auto ; box-shadow : 0 0 12px rgba( 0 , 0 , 0 ,. 3 ); } figure#oymyakon figcaption { text-align : center ; font-size : 1 rem; font-style : italic ; margin-top : 1 rem; } |
在这篇文章中,我们要使用不同的技术来隐藏<figure>
元素。你可以在DEMO中自己先看一下效果。
figure#oymyakon { transform : scale ( 0 ); } |
将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。
设置scale
为1可以使隐藏的元素变为可见。这种过度效果是可以制作动画的。
浏览器兼容:该技术可以在所有现代浏览器中运行,IE浏览器要IE9+。该技术不可以使用在行内元素上,旧版本的浏览器需要浏览器厂商前缀的支持。
< figure id = "oymyakon" hidden> |
hidden
属性的效果和display:none;
相同,这个属性用于记录一个元素的状态:
“When specified on an element, hidden indicates that the element is not yet, or is no longer, directly relevant to the page’s current state.”
hidden
属性是HTML5的可用属性之一。不同于本文描述的其它方法,hidden
属性隐藏元素的所有展示平台,例如打印设备和移动设备。
浏览器兼容:除了IE浏览器,所有的现代浏览器都支持该HTML5属性。
对于IE浏览器,可以使用一个属性选择器来在CSS文件中为该属性提供回退方案。
figure#oymyakon { height : 0 ; overflow : hidden ; } |
这个技术是一种传统的隐藏元素的解决方案。它将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。使用这种技术隐藏元素后,元素原来的空间任然存在:虽然元素没有了高度,但是元素还有宽度,可能还有margin
、padding
等属性,这些都会影响页面的布局。
浏览器兼容:所有浏览器都支持这种技术。
不能再行内元素上使用该技术。该技术中height
属性不可以制作动画,但是max-height
可以。
figure#oymyakon { filter: blur( 100px ); } |
IE浏览器完全不支持blur
这种技术。这种技术是将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。使用该技术要注意:
blur
值越高,循环计算的次数就越多,太高的模糊值会严重影响页面渲染的速度,在手机设备上这个技术是不可取的。在学习了这篇文章和上一篇文章介绍的隐藏元素的技术之后,你已经有了足够多的方法来在页面上隐藏和显示元素。你要知道,没有一种技术是最好的,每一种技术都有它的优点和缺点,要看你如何取舍。
联系客服