我是这家公司的新人,我们的产品使用了数英里的css.我正在尝试为我们的应用程序制作一个可打印的样式表,但我在@media print中遇到了背景色问题...
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Run Code Online (Sandbox Code Playgroud)
其他一切工作,我可以修改边框等,但背景颜色将不会在打印中出现.现在我明白你们可能无法回答我的问题并提供更多细节,我只是好奇,如果有人之前有这个问题,或类似的东西.
我想创建像记录器一样跟踪用户的所有动作.为此,我需要识别用户与之交互的元素,以便我可以在以后的会话中引用这些元素.
用伪代码说,我希望能够做类似以下的事情
示例HTML(可能有任何复杂性):
<html>
<body>
<div class="example">
<p>foo</p>
<span><a href="bar">bar</a></span>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
用户点击某些内容,例如链接.现在我需要识别被点击的元素并将其位置保存在DOM树中以供以后使用:
(any element).onclick(function() {
uniqueSelector = $(this).getUniqueSelector();
})
Run Code Online (Sandbox Code Playgroud)
现在,uniqueSelector应该是这样的(我不介意它是xpath还是css选择器样式):
html > body > div.example > span > a
Run Code Online (Sandbox Code Playgroud)
这将提供保存该选择器字符串并在以后使用它来重放用户所做的操作的可能性.
怎么可能?
得到了我的答案:为元素获取jQuery选择器
我有一些简单的CSS:
#someElement {
background-color:black;
color:white;
}
Run Code Online (Sandbox Code Playgroud)
它在浏览器中看起来不错,但是当我在Firefox中打印它时,它在白色背景上显示为黑色文本.我想这是一种节省墨水的功能,但有什么方法吗?
当我使用bootstrap时,它会在我尝试打印页面时删除背景颜色.几乎我网站上的所有内容都是使用bootstrap类,所以我想在bootstrap之外避免很多手动CSS.我发现bootstrap @media print用来删除背景颜色.我也使用了一个bootstrap主题(主题联合),它也删除了背景颜色.
主题united.css
@media print
*, *:before, *:after {
background: rgba(0, 0, 0, 0) !important;
color: rgb(0, 0, 0) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
Run Code Online (Sandbox Code Playgroud)
bootstrap.min.css
@media print
*, :after, :before {
color: rgb(0, 0, 0)!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
Run Code Online (Sandbox Code Playgroud)
有没有办法确保在打印时不删除背景颜色而不编辑这2个CSS文件?
例如:当我使用.alert-danger时,我希望在屏幕上显示警告危险,因此将打印为红色框.
见JSFiddle:http: //jsfiddle.net/7mtk7wrh/
我想用一个div具有background-color,但如果我打印页面会出现在白色.
当我使用<tr bgcolor="#333333">它创建表时也不起作用.
如何使用css和创建打印页面html?
我的代码:
<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
<tr bgcolor="#999999">
<td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud) 我在打印背景颜色方面遇到了一些问题.
print-color-adjust使背景颜色问题在chrome中得到解决.
body{
-webkit-print-color-adjust: exact;
}
Run Code Online (Sandbox Code Playgroud)
firefox和IE中有什么替代CSS.
使用幻像JS 1.9.7我在将我的网页打印为PDF时遇到问题.
不是精确地匹配页面,而是剥离背景颜色和图像,如下所示: 如何强制浏览器在CSS中打印背景图像?
我在tablerow中遇到问题背景颜色.
<tr style="background-color:#999999">
<td width="204"> <strong>Opinion</strong></td>
<td width="62"> <strong>Action</strong></td>
<td colspan="4"><strong>Ratings</strong></td>
<td width="54"><strong>Outlook</strong></td>
<td width="93"><strong>Rating Type</strong></td>
</tr>
Run Code Online (Sandbox Code Playgroud)
这段代码工作正常
这是输出
问题
当我想要打印此页面时.background-color该行没有显示.
谁能帮帮我吗?
我正在尝试使用 anglat 打印页面,window.print();一切正常,所有其他 css 工作正常,唯一的问题是背景颜色没有显示在可打印文档中,我附上了 StackBlitz 示例,所以:以前有人遇到过这个问题吗?,如果是的话,解决办法是什么,谢谢。
注意:我在 stackoverflow 和其他论坛上做了很多研究,但没有人谈论这个问题。
可打印文件 HTML :
<div class="page-container">
<div class="title-container">Invoice Title</div>
<div class="body-container">
This is what I'm going to print, everything works fine , but the background color never changes , no matter what i add to css file
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
页面的CSS:
.page-container{
width: 100%;
background-color : rgb(216, 23, 23); // as you can see , background not working
}
.title-container{
font-size: 24px;
width: 100%;
display: flex;
flex-direction: …Run Code Online (Sandbox Code Playgroud) css ×6
html ×5
firefox ×2
angular ×1
css3 ×1
html-table ×1
javascript ×1
jquery ×1
phantomjs ×1
print-css ×1
printing ×1
typescript ×1