如何隐藏每个图像底部打印的动作 link

Question

我的页面包含几张图片：

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

当我打印我的页面 (chrome) 时，href 在每个图像的底部可见。

请问如何隐藏每张图片底部打印的动作link？

例如，当我将 class 'hidden-print' 应用到操作块时，我的图像就消失了...

Answer 1

包含打印网页时使用的 print.css 文件是很常见的。该文件可能包含所有锚标记的样式，以在 link.

之后输出 href

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

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

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

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

希望对您有所帮助

Answer 2

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

媒体只会在打印页面时触发。
透明色当然不会印了。

Answer 3

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

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

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

if you're using Twitter Bootstrap as a framework, this will work for you(from ):

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

If you are not sure , where is it written or if you can not change the external css, you will also require to consider the :before pseudo class

@media print{

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

}

How to hide the action link printed at the bottom of each image