Menu
Have an application that draws divs with background color as its graphics.
These divs appear fine on screen but the divs disappear when printing to PDF.
Traced the problem to Twitter Bootstrap CSS. The divs print fine when Bootstrap CSS is not present. But don't print when it is. See this JSFiddle:
http://jsfiddle.net/VYg9s/
I think the problem is this section of Twitter CSS. I think I need to override the background: transparent !important but can't for the life of me figure out how.
This is presumably simple. Tried background: opaque !important but that didn't work, and I can't seem to find a list of allowable values for the background property.
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
What's the opposite of background: transparent !important; in CSS?
782
There are two main ways you can override Bootstrap CSS: Override using a higher specificity selector and properties via CSS. Using Bootstrap Sass variables (recommended)
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
There is no hex code for transparency. For CSS, you can use either transparent or rgba(0, 0, 0, 0) .
You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.
The opposite of background: transparent !important; is background: color hex code !important;
"color hex code" can be any CSS acceptable color code type; like rgb, rgba, hexadecimal, etc.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
