隱藏圖片,你可以使用CSS中的display
屬性來實(shí)現(xiàn),這個(gè)屬性可以指定元素是否應(yīng)該顯示,或者如何顯示。
如果你想要隱藏一個(gè)圖片,你可以給圖片所在的元素添加display: none;
樣式,這樣,圖片就不會(huì)被顯示了。
<img class="hidden-image" src="image.jpg" alt="這是一張圖片">
.hidden-image { display: none; }
在上面的例子中,圖片元素有一個(gè)類名hidden-image
,我們?cè)贑SS中為這個(gè)類名設(shè)置了display: none;
樣式,這樣,圖片就不會(huì)被顯示了。
需要注意的是,display: none;
不僅僅是隱藏圖片,而是讓元素完全消失,就像它從未存在過一樣,如果你只是想讓圖片不可見,但還想保留圖片在文檔中的位置,那么可以使用visibility: hidden;
樣式。
.hidden-image { visibility: hidden; }
使用visibility: hidden;
樣式,圖片雖然不可見,但仍然會(huì)占據(jù)文檔中的空間,如果你需要更細(xì)致的控制,可以使用opacity: 0;
樣式。
.hidden-image { opacity: 0; }
使用opacity: 0;
樣式,圖片不僅不可見,而且不會(huì)占據(jù)文檔中的空間,不過,需要注意的是,opacity: 0;
樣式并不會(huì)讓元素完全消失,只是讓它變得完全透明,如果你想要讓元素完全消失,那么還是使用display: none;
樣式吧。