我正在开发一个网站,需要处理打印视图.通常,当我遇到布局问题时,我会使用Chrome的Element Inspector.但是,这在打印预览模式下不存在.
是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面？我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错.
现在我只专注于打印预览媒体,但是能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /)是理想的电视).
google-chrome print-preview web-inspector google-chrome-devtools
我正在尝试打印一个页面.在那个页面中,我给了一张表背景颜色.当我在chrome中查看打印预览时,它没有采用背景颜色属性...
所以我尝试了这个属性:
-webkit-print-color-adjust: exact;
但仍然没有显示颜色.
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>zznn@abc.co</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td> …我尝试使用以下代码注入样式:
document.body.style.color='green!important';
根据CSS级联引用,通过应用!important规则,我可以胜过原点和特异性.
我尝试使用Firefox Firebug将其注入www.google.com,但没有运气.
如何使用!important规则注入前景色？
目的是用彩色td-s打印表格.我需要一种适合所有类型浏览器的方法.
有什么办法吗？
我有一个bootstrap CSS/print的问题.
在bootstrap CSS(reset.css)中,所有内容都被清除以进行打印
@media print {
* {
text-shadow: none !important;
color: black !important;
background: transparent !important;
box-shadow: none !important;
}
}
但我必须打印几行彩色.我的表看起来像这样:
<div class="container">
<div id="task-summary">
<div id="process-summary">
<table class="table table-condensed">
<tbody>
<tr class="success">
<td>
我把它嵌入到我的代码中,但它不起作用:
@media print {
#task-summary{
.success{
background-color: #DFF0D7 !important;
}
}
}
我已经尝试过如果使用display:none来排除css ..它可以正常工作(行不显示)并且似乎在正确的位置.
有人知道如何在不编辑bootstrap的reset.css的情况下设法覆盖bootstrap css命令吗？
我在Firefox和IE中打印背景色有些问题.对于谷歌浏览器我找到了跟随黑客,它运作良好,但对于Firefox和IE我找不到任何东西.
//Hack for Google Chrome
-webkit-print-color-adjust:exact;
如果有人可以帮助我,我很高兴.
如果我table在表上使用Bootstrap 类,则打印预览不会显示背景颜色tr.
我的代码
<head>
<!-- All Bootstrap's stuff ... -->
<!-- My custom style -->
<style type="text/css">
@media print {
.bg-danger {
background-color: #f2dede !important;
}
}
</style>
</head>
<body>
<div class="bg-danger">
<td>DIV</td>
</div>
<table class="table">
<tr class="bg-danger">
<td>TR 1</td>
</tr>
<tr class="danger">
<td>TR 2</td>
</tr>
<tr style="background-color: #f2dede !important;">
<td>TR 3</td>
</tr>
</table>
</body>
在屏幕上,所有都是红色,但在打印预览时,只有div元素是红色.
如果我删除table该类,一切正常(除了我需要表格样式).
我的配置:IE11和Windows 7.
是否有打印背景颜色的技巧？
注意:指示的副本(带有背景颜色的CSS @media打印问题;)不是此处的问题,我的设置被选中以打印背景颜色.此外,我可以打印其他几个元素的颜色.
答案:
感谢@Ted评论,我压倒td了table …
我希望每个打印页面上都有相同的背景图像。每当由于溢出而需要某个页面时，它应该具有与前一个页面相同的背景图像。
我一直在尝试这样做
@page {
size: US-Letter portrait;
background-image: url("something.jpg");
padding: 3in .5in .75in .5in;
}
但这不适用于任何浏览器。这是根本不可能的事情吗？还是还有更多我还没有发现的技巧？
我有一个页面，其中包含必须可打印的统计图表等。我只想使用标准浏览器打印功能来启用打印。我还有 css，它可以更改所选按钮的按钮颜色，以明确正在查看哪些图表。但是，我的问题是，当我尝试打印页面时，这种颜色会丢失并重置为其默认呈现方式。
我知道通过在 CSS 中使用 webkit-print-color-adjust 设置在 Chrome 中执行此操作的功能，但是，我企业中的绝大多数用户使用 IE 或 Edge（因为它们是 Microsoft 默认值），因此我需要一个适用于他们的解决方案。
我尝试使用 !important 和 @media print 但目前还没有效果，除非我使用错误。
目前的 CSS 是这样的：
@media print{
.btn-primary-chart:active,
.btn-primary-chart.active {
color: #ffffff;
background-color: green !important;
border-color: #285e8e;
}
}
任何帮助将不胜感激 ：）
css ×8
html ×3
printing ×3
css3 ×2
firefox ×2
dom ×1
html-table ×1
javascript ×1
overriding ×1
sass ×1
styling ×1
webkit ×1