如何隐藏每个图像底部打印的操作链接答案

【问题标题】：How to hide the action link printed at the bottom of each image如何隐藏每个图像底部打印的操作链接
【发布时间】：2015-04-18 03:27:25
【问题描述】：

我的页面包含几张图片：

<a class="fancybox" href="img/16.jpg"><img src="img/16.jpg" class="center-block img-responsive"></a>

当我打印我的页面 (chrome) 时，href 显示在每张图片的底部。

那么，请问如何隐藏打印在每张图片底部的操作链接？

例如，当我将“隐藏打印”类应用于操作块时，我的图像就消失了……

【问题讨论】：

【解决方案1】：

我无法在 chrome 上重现该问题，所以我猜这不是因为锚标签。正如杰克逊已经说过的，你可能有，

a:after {
   content: " (" attr(href) ")";
}

如果您使用过，可以在您的任何 css 框架中使用。

如果您使用 Twitter Bootstrap 作为框架，这将适用于你（来自https://stackoverflow.com/a/14931127/3556874）：

a[href]:after{
    content:"";
}

如果你不确定，它写在哪里或者你不能改变外部 css，您还需要考虑 :before 伪类

@media print{

 a[href]:after{
        content:"";
    }
 a[href]:before{
        content:"";
    }

}

【讨论】：

【解决方案2】：

通常包含打印网页时使用的 print.css 文件。该文件可能包含所有锚标记的样式，以在链接后输出 href。

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

在 css 文件中，您可能会发现 a 标签的样式值，如下所示：

a:after {
   content: " (" attr(href) ")";
}

删除此样式可能会解决您的问题。

希望对你有帮助

【讨论】：

【解决方案3】：

@media print {
     .fancybox {
         color: transparent;
     }
}

媒体只会在打印页面时触发。
透明色将不会被打印出来。

【讨论】：