使用css讓元素不可見的方法很多，剪裁、定位到螢幕外、明度變化等都是可以的。雖然它們都是肉眼不可見，但背後卻在多個維度上都有差別。

元素不可見，同時不佔據空間、輔助裝置無法訪問、不渲染

使用 script 標籤隱。例如：

<script type="text/html">
    <img src="1.jpg">
</script>

此時，圖片 1.jpg 是不會有請求的。<script>標籤是不支援巢狀的，因此，如果希望在<script>標籤中再放置其他不渲染的模板內容，可以試試使用<textarea>元素。例如：

<script type="text/html">
    <img src="1.jpg">
    <textarea style="display: none;">
        <img src="2.jpg">
    </textarea>
</script>

同樣 2.jpg 也是不會有請求的。
另外，<script>標籤隱藏內容獲取使用script.innerhtml，<textarea>使用textarea.value。

元素不可見，同時不佔據空間、輔助裝置無法訪問，但資源有載入，DOM 可訪問

使用display: none隱藏。例如：

.dn {
    display: none;
}

元素不可見，同時不佔據空間、輔助裝置無法訪問，但顯隱的時候可以有transition淡入淡出效果

使用position: absolute和visibility: hidden;隱藏。例如：

.hidden {
    position: absolute;
    visibility: hidden;
}

資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com

元素不可見，不能點選、輔助裝置無法訪問，但佔據空間保留

使用visibility: hidden;隱藏。例如：

.hn {
    visibility: hidden;
}

元素不可見，不能點選、不佔據空間，但鍵盤可訪問

使用clip裁剪 或者relative隱藏。例如：

.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}

元素不可見，不能點選、但佔據空間、鍵盤可訪問

使用relative和z-index隱藏。例如，如果條件允許，也就是和層疊上下文之間存在設定了背景色的父元素，則也可以使用更友好的z-index負值隱藏。例如：

.lower {
    position: relative;
    z-index: -1;
}

元素不可見，可以點選、不佔據空間

使用透明度隱藏。例如：

.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}

元素不可見，可以點選、可以選擇、佔據空間

使用透明度隱藏。例如：

.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}

大家可以通過實際的隱藏場景選擇合適的隱藏方法。