在网站开发中，有时需要对图片进行一些特殊处理。例如，需要隐藏某些图片，让用户在需要时才能看到它们。对此，我们可以使用 css 来隐藏图片。
1、使用 display:none 属性
最常用的方法是使用 display:none 属性来隐藏图片。在 CSS 中，display 属性用于定义元素应该生成多少框，并且如何生成这些框。当 display:none 被应用于一个元素时，它将不会被渲染。因此，我们可以通过将这个属性应用于图片元素来隐藏图片。
下面是一个示例代码：
img {
display: none;
}
上述代码将影响所有的图片元素，并将它们全部隐藏。
当需要显示某个隐藏的图片时，我们可以使用 JavaScript 来实现。例如，下面的代码将通过该 ID 获取图片元素，并将其 display 属性设为“block”，从而显示该图片。
document.getElementById("myImg").style.display = "block";
2、使用 visibility:hidden 属性
另一种常见的方法是使用 visibility:hidden 属性来隐藏图片。该属性类似于 display:none，但是元素的空间仍然保持不变。也就是说，元素依然存在，只是被隐藏了。
下面是一个示例代码：
img {
visibility: hidden;
}
上述代码将隐藏所有图片元素。
当需要显示某个隐藏的图片时，我们可以使用 JavaScript 来实现。例如，下面的代码将通过该 ID 获取图片元素，并将其 visibility 属性设为“visible”，从而显示该图片。
document.getElementById("myImg").style.visibility = "visible";
3、使用 opacity 属性
还可以使用 opacity 属性来隐藏图片。该属性用于控制元素的不透明度，从而实现元素的隐藏。当 opacity 被设置为 0 时，元素将变得完全透明，并且显示不存在。
下面是一个示例代码：
img {
opacity: 0;
}
上述代码将影响所有的图片元素，并将它们全部隐藏。
当需要显示某个隐藏的图片时，我们可以使用 JavaScript 来实现。例如，下面的代码将通过该 ID 获取图片元素，并将其 opacity 属性设为“1”，从而显示该图片。
document.getElementById("myImg").style.opacity = "1";
总结
上述的三种方法都可以用来隐藏图片，这取决于具体情况而定。使用 display:none 的方法，可以完全隐藏图片，而使用 visibility:hidden 的方法，则可以保留元素的空间。使用 opacity 属性，可以通过设置不透明度来实现图片的隐藏和显示。
在实际开发中，我们可以根据需要使用这些方法来隐藏或显示图片。这些方法都非常简单易懂，而且能够涵盖大多数的需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
