我试着在我的www.example.com网站上打印一个彩色页面asp.net。但是所有的颜色都是白色的。但是我的Highcharts颜色和图像是彩色的。我正在使用Bootstrap 3,不确定这是否会影响什么,我还选中了打印背景颜色的复选框。有人知道为什么我的颜色不能打印吗?
f45qwnt81#
您可以在CSS中使用类似下面的内容将Bootstrap的设置覆盖回“inherit”(请记住在 * Bootstrap之后包含CSS *):
@media print { * { color: inherit !important; background: inherit !important; } }
kyxcudwk2#
在发布问题后不久就找到了解决方案。bootstrap.css中的以下行需要更改。
@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}
出于我的目的,我删除了color:和background:属性。
color:
background:
sr4lhrrt3#
@media print { /* color:#000!important; */ text-shadow:none!important; /* background:transparent!important; */ box-shadow:none!important }
您可以从您的bootstrap.min.css或bootstrap.css中删除(或注解掉)颜色和背景样式@media print,无论您在您的站点(母版页)中引用了哪一个...它对我起作用了!!它会用它的颜色格式打印网页。
@media print
wqsoz72f4#
我认为@乔纳森的解决方案是正确的,尽管对我来说并不奏效。正如@pixelearth在评论中所说的,最好的解决方案可能是覆盖来自Bootstrap CSS的@media print。但在这种情况下不能使用inherit选项。在我的例子中,如果我像在页面CSS中一样设置color和background这两个属性,则可以很好地覆盖@media print。如果你想覆盖Bootstrap的@media print CSS,你必须在Bootstrap的CSS之后包含一个新的CSS文件(无论是否缩小)。
inherit
color
background
<link href="/Content/bootstrap.css" rel="stylesheet"> <link href="/Content/printable-page.css" rel="stylesheet">
下面是我的printable-page.css CSS文件的内容:
printable-page.css
@media print { *, *:before, *:after { color: #b01717 !important; background: transparent !important; } }
正如我所说,两个值color: #b01717和background: transparent来自网站的主CSS(来自body或page部分)。也许这对某些人来说是一个有限的解决方案,但在我的情况下,“可打印”页面有一个非常简单的样式,我也可以避免编辑bootstrap.css文件。
color: #b01717
background: transparent
body
page
g2ieeal75#
修改bootstrap.css文件中的以下内容
@media print { *, *:before, *:after { background:transparent !important; /*color:#000 !important;*/ -webkit-box-shadow:none !important; box-shadow:none !important; text-shadow:none !important }
在css文件中添加以下代码
@media print { * :not(.printDefaultcolor *) { color: #000 !important; } }
在html中作为
<div class="printDefaultcolor"> your html code <span style="font-weight: bold;">bold </span> <span class="text-success">color </span> </div>
5条答案
按热度按时间f45qwnt81#
您可以在CSS中使用类似下面的内容将Bootstrap的设置覆盖回“inherit”(请记住在 * Bootstrap之后包含CSS *):
kyxcudwk2#
在发布问题后不久就找到了解决方案。bootstrap.css中的以下行需要更改。
出于我的目的,我删除了
color:
和background:
属性。sr4lhrrt3#
您可以从您的bootstrap.min.css或bootstrap.css中删除(或注解掉)颜色和背景样式
@media print
,无论您在您的站点(母版页)中引用了哪一个...它对我起作用了!!它会用它的颜色格式打印网页。
wqsoz72f4#
我认为@乔纳森的解决方案是正确的,尽管对我来说并不奏效。
正如@pixelearth在评论中所说的,最好的解决方案可能是覆盖来自Bootstrap CSS的
@media print
。但在这种情况下不能使用inherit
选项。在我的例子中,如果我像在页面CSS中一样设置
color
和background
这两个属性,则可以很好地覆盖@media print
。如果你想覆盖Bootstrap的
@media print
CSS,你必须在Bootstrap的CSS之后包含一个新的CSS文件(无论是否缩小)。下面是我的
printable-page.css
CSS文件的内容:正如我所说,两个值
color: #b01717
和background: transparent
来自网站的主CSS(来自body
或page
部分)。也许这对某些人来说是一个有限的解决方案,但在我的情况下,“可打印”页面有一个非常简单的样式,我也可以避免编辑bootstrap.css文件。
g2ieeal75#
修改bootstrap.css文件中的以下内容
在css文件中添加以下代码
在html中作为