{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 浪荡孟婆 的问题《CSS @media print issues with background-color;》','https://www.manongdao.com/q-9293.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm new here at this company and we have a product that uses miles of css. I'm attempting to make a printable stylesheet for our app but i'm having issues with background-color in @media print...
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}}
everything else works, i can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question with out more details, I was just curious if anyone had this issue, or something similar, before.
For chrome, I have used something like this and it worked out for me.
Within the body tag,
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
GOT iT - even if the question was "closed" years ago : )
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
- Only tested in Chrome + Firefox on Ubuntu...
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
And your CSS:
You can use the tag
canvasand "draw" the background, which work on IE9, Gecko and Webkit.There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
Activate it by adding the class to your element:
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than
display: block;ordisplay: table-cell;, so for example<table class="your-background">and<tr class="your-background">won't work.We use this to get background colors in all browsers (still, IE9+ required).
Despite
!importantusage being generally frowned upon, this is the offending code inbootstrap.csswhich prevents table rows from being printed withbackground-color.Let's assume you are trying to style the following HTML:
To override this CSS, place the following (more specific) rule in your stylesheet:
This works because the rule is more specific than the bootstrap default.