📅 最后修改于: 2023-12-03 15:24:30.041000 🧑 作者: Mango
有时候我们想在网页中引用一些图片，但我们不希望它们一开始就显示出来，而是等到用户点击某个链接或滚动至某个位置后再显示。这时，我们就需要掌握如何在HTML中隐藏图片。
在HTML中，可以通过以下两种方式来隐藏图片：
可以使用CSS中的display属性来隐藏图片，将图片的display属性设置为none即可。例如：
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: none;
}
</style>
</head>
<body>
<h2>My Favorite Cars</h2>
<p>Here are some of my favorite cars:</p>
<img src="car1.jpg" alt="Car 1">
<img src="car2.jpg" alt="Car 2">
<img src="car3.jpg" alt="Car 3">
</body>
</html>
在上面的代码中，三张图片被引用，但它们都被隐藏了。如果要显示某张图片，可以使用JavaScript来改变它的display属性。
可以使用JavaScript来改变图片的display属性，从而达到隐藏图片的效果。例如：
<!DOCTYPE html>
<html>
<body>
<h2>My Favorite Cars</h2>
<p>Here are some of my favorite cars:</p>
<img id="car1" src="car1.jpg" alt="Car 1">
<img id="car2" src="car2.jpg" alt="Car 2">
<img id="car3" src="car3.jpg" alt="Car 3">
<script>
document.getElementById("car1").style.display = "none"; //隐藏car1
document.getElementById("car2").style.display = "none"; //隐藏car2
document.getElementById("car3").style.display = "none"; //隐藏car3
</script>
</body>
</html>
在上面的代码中，三张图片也被引用，但它们同样都被隐藏了。如果要显示某张图片，可以使用JavaScript来改变它的display属性。
以上就是如何在HTML中隐藏图片的两种方式。可以根据具体需求来选择使用哪种方法。