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

Question

我的页面包含几张图片：

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

当我打印页面（chrome）时，每个图像底部都会显示href。

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

当我申请时，例如，课程“隐藏 - 打印”＆＃39;到动作块然后我的图像消失了......

Answer 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:"";
    }

}

Answer 2

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

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

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

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

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

希望这有帮助

Answer 3

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

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