隱藏元素的方法可以總結為六類:直接隱藏、對溢位內容隱藏、對元素透明度進行調整、將元素移除當前螢幕、對元素的層級關係進行調整、對元素進行裁剪
只有對元素的透明度進行調整才可以點選,其餘都不可點選
// 直接隱藏visibility:hidden
display:none
// 對溢位內容隱藏
overflow:hidden
text-overflow:ellipsis
// 對元素透明度進行調整
opacity:
0background:transparent
// 將元素移除當前螢幕
position:absolute/relative
margin:-1000px
transform:translate(-9999px)
text-indent:-9999px
// 對元素的層級關係進行調整
z-index:-1000
// 對元素進行裁剪
clip(clip-path):rect()/inset()/polygon()
.hide.hide
.hide.hide
.hide.hide_2
.hide_2
注:過濾元素filter也可使用opacity值設定透明度,不過filter現在的相容性不好,只支援webkit核心,這裡順帶一提。
.hide.hide-2
div.hide
.hide
/* 佔據空間,無法點選 */
}
.hide
.hide.hide_2
注:在以前,這可以通過 clip 屬性來實現,但是這個屬性被廢棄了(現在瀏覽器依然支援),換成乙個更好的屬性叫做 clip-path,但可惜的是依舊只能在chrome40+瀏覽器裡使用。
css 隱藏元素的八種方法
css之10種隱藏元素的方法
用 css 隱藏頁面元素的 5 種方法
CSS隱藏元素的五種方法
1 opacity 0 2 visibility hidden 3 diaplay none 4 position absolute display display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。使用這個屬性,被隱藏的元素不佔據任何空間。...
CSS隱藏元素的常用的3種方法
將它的值設為hidden將隱藏我們的元素。如同opacity屬性,被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何使用者互動。此外元素在讀屏軟體中會被隱藏。display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見並且連盒模型也不生成。...
CSS隱藏元素的幾種方法
css隱藏元素的幾種方法 1.display none 2.visibility hidden 3.clip path polygon 0px 0px,0px 0px,0px 0px,0px 0px 4.opacity 0 5.position absolute top 9999px left 99...