如何使用 CSS 隐藏图像按钮不打印？ [复制]

Posted 2023-03-15

【中文标题】如何使用 CSS 隐藏图像按钮不打印？ [复制]

【英文标题】：How to hide a image button from printing using CSS? [duplicate]

【发布时间】：2013-02-23 20:18:06

【问题描述】：

我的网页（php html）中有一个“打印”按钮，我不希望它与我的数据一起打印。 我可以用 CSS 做吗？还有其他方法吗？

【问题讨论】：

不要隐藏该按钮，而是打开一个带有 javascript 的新窗口，其中包含您要打印的内容，然后调用 javascript 函数在该窗口中打印并关闭它。

他要求的是 CSS 方式，而不是 JS 方式。

@JamieHutber 我不确定 CSS 方式是否适用于所有浏览器。这就是我建议该选项的原因。

很公平。 css 不适用于所有浏览器。

我需要用php传递变量所以我不能使用window.open()

【参考方案1】：

是的，您可以使用 CSS，但仅支持 CSS3 的浏览器。

但它很简单：

 @media print 
    …
 

【参考方案2】：

为按钮分配一个 id(buttonId) 例如：id="buttonId" 然后在 css 中：

#buttonId

    display:none;


<link rel="stylesheet" href="print.css" type="text/css" media="print" />

只需使用上面的 css 文件即可。

【讨论】：

你能解释一下为什么它被否决了吗？

我认为它不会隐藏其他按钮，因为使用了 id，并且页面中只有一个元素具有该 id

【参考方案3】：

只需创建多个样式表

<style type="text/css" media="all"> @import "nucss2.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

然后看看

media="打印"