css 隐藏元素显示元素_使用CSS打印时如何隐藏元素？

最新推荐文章于 2024-07-12 19:06:42 发布

cumudi0723

最新推荐文章于 2024-07-12 19:06:42 发布

阅读量594

点赞数

文章标签： python css java 人工智能编程语言

原文链接：https://www.includehelp.com/code-snippets/how-to-hide-element-at-the-time-of-printing-using-css.aspx

版权

css 隐藏元素显示元素

Introduction:

介绍：

We have come across many challenges while developing a website or web page and every challenge comes with new learnings. It is a trait of a good developer who develops or creates websites or web pages by learning at the same time. Therefore, every challenge posed at you, you must not give in there are numerous sources on the internet from where you can look for answers and get your problem solved. Besides, such problems come with an opportunity to learn something which in turn would improve your knowledge and you will be able to master skills to a greater extent. Similarly, the topic here is How to hide elements at the time of printing. Well, it sounds a bit tricky but the solution is very easy, so read on to find the answer.

在开发网站或网页时，我们遇到了许多挑战，每个挑战都伴随着新的学习。这是一个优秀的开发人员的特征，他通过同时学习来开发或创建网站或网页。因此，面对您的每项挑战，您都不能放弃互联网上的大量资源，您可以从中寻找答案并解决问题。此外，这些问题还提供了学习一些东西的机会，这些东西反过来会提高您的知识，并且您将能够更大程度地掌握技能。同样，此处的主题是如何在打印时隐藏元素。好吧，这听起来有些棘手，但是解决方案非常简单，因此请继续阅读以找到答案。

Methods:

方法：

We use various ways to make our website or web page responsive. Many properties come into play for making our website or web page responsive. Well, one can not know about all the properties regarding web development but one can learn about many properties regarding web development. Therefore, with that notion in mind let us move forward with the topic which is that how can we hide the element while printing and you will be rather surprised when you find out the answer?

我们使用各种方法使我们的网站或网页具有响应能力。许多属性都可以使我们的网站或网页具有响应能力。好吧，人们可能不知道有关Web开发的所有属性，但是可以了解有关Web开发的许多属性。因此，考虑到这一概念，让我们继续讨论这个主题，那就是我们如何在打印时隐藏元素，当您找到答案时，您会感到很惊讶吗？

Solution:

解：

When the user wants to hide any element while printing he/she can simply use the visibility property in CSS and set its value to hidden within the @media print query. Easy as sugar right? Well, some things do sound a bit tricky at the start but when you start engaging with the problem the solution comes out to be rather easy. The method above is also easy when it comes to implementation.

当用户想要在打印时隐藏任何元素时，他/她可以简单地使用CSS中的visible属性，并将其值设置为@media打印查询中的hidden。像糖一样容易吗？好吧，开始时有些事情确实有些棘手，但是当您开始解决问题时，解决方案就会变得非常简单。上面的方法在实现时也很容易。

Let's make it clear with the syntax below,

让我们用下面的语法来阐明一下，

Syntax:

句法：

@media print {
    element {
        visibility: hidden;
    }
}

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        @media print {
            img {
                visibility: hidden;
            }
        }
    </style>
</head>

<body>
    <h1>Hide element at print</h1>
    <img src="img_forest.jpg" width="240" height="184">
</body>

</html>

Output

输出量

CSS | Hide element at print | Example (1)

In the above example, initially, the page looks like this before printing the page but as soon as we print the element the output would be different.

在上面的示例中，最初，页面在打印页面之前看起来像这样，但是一旦我们打印元素，输出就会不同。

Output

输出量

CSS | Hide element at print | Example (2)

Conclusion:

结论：

So, go on and start playing around with the new-found knowledge visibility property is a very crucial property when it comes to dealing with various elements and it also helps in making a website or webpage very responsive and stylish.

因此，继续使用新发现的知识可见性属性是一个非常关键的属性，它涉及到各种元素，并且还有助于使网站或网页具有快速响应性和时尚性。

翻译自: https://www.includehelp.com/code-snippets/how-to-hide-element-at-the-time-of-printing-using-css.aspx

css 隐藏元素显示元素

cumudi0723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 隐藏元素显示元素_使用CSS打印时如何隐藏元素？

css 隐藏元素显示元素Introduction: 介绍： We have come across many challenges while developing a website or web page and every challenge comes with new learnings. It is a trait of a good developer who develops...
复制链接

扫一扫