Css background color display none

CSS @media print issues with background-color;

I’m attempting to make a printable stylesheet for our app but I’m having issues with background-color in @media print .

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 without more details. I was just curious if anyone had this issue, or something similar, before.

This should not be a problem any longer. I came to this issue because I had a bootstrap page and bootstrap has an @media print query which removes background colors from tables (e.g. stripes).

22 Answers 22

To enable background printing in Chrome:

Edit: For Chrome, Safari and Firefox:

Ensure that you use the correct casing to your image path as Chrome’s print dialog doesn’t load the images on the first try. This only happens in the event that your background-image property’s URL doesn’t match the casing of the physical folder’s name. (Reported in version 48.0.2564.109 m)

IF a user has «Print Background colours and images» turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.

Once that is set so it will print background colours and images, what you have there will work.

It is found in different spots. In IE9beta it’s found in Print->Page Options under Paper options

In FireFox it’s in Page Setup -> [Format & Options] Tab under Options.

With Chrome and Safari you can add the css style «-webkit-print-color-adjust: exact;» to the element to force print the background color and/or image

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.

You can add IE8 and IE9 support with -ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#fffada’, endColorstr=’#fffada’)»; /* IE8 */ If you want your sprite images to be visible, use the img/clip technique css-tricks.com/css-sprites-with-inline-images, that will give you images in IE9 and FF (not IE8 though)

@woz I have it functioning in a project with IE8/9. The gradient (just like box-shadow) adds an extra background element that is not eliminated by the forced browser reset. would you mind to share your css?

This fails for me in Chrome. I’m using 69. That suggests that it has been broken at least since 60 (as per @swervo’s comment).

Try this, it worked for me on Google Chrome:

-webkit-print-color-adjust: exact; alone is Not enough you have to use !important with the attribute

this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag

and this is printing preview on chrome before adding !important

now, to know how to inject !important to div’s style, check out this answer I’m unable to inject a style with an “!important” rule

Two solutions that work (on modern Chrome at least — haven’t tested beyond):

1. !important right in the regular css declaration works (not even in the @media print)
2. Use svg

!important solves the problem in every modern browser, as long as «Print Background Colors and Images» is enabled.

!important also works without user intervention if you use it together with body < -webkit-print-color-adjust:exact; >(as per comment above)

i’ve found that if I use color-adjust or the webkit variant I do not in fact need the important rule.

If you are looking to create «printer friendly» pages, I recommend adding «!important» to your @media print CSS. This encourages most browsers to print your background images, colors, etc.

background:#3F6CAF url('example.png') no-repeat top left !important; background-color: #3F6CAF !important; 

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; or display: table-cell; , so for example and won’t work.

We use this to get background colors in all browsers (still, IE9+ required).

it’s a mad hack, but it at least forces some form of background colour regardless of the print settings. brilliant, thanks.

For chrome, I have used something like this and it worked out for me.

Or for a particular element, let’s say if you have table and you want to fill a td i.e a cell,

Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color .

Let’s assume you are trying to style the following HTML:

 
 
Name
 
School
 
Height
 
Weight
 
 
 

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.

After hours of searching, I found this answer. I went in and eliminated the lines from Bootstrap.css and WHAM! Colors in the printable background!

I just added to the print media query this snippet and all style was applied as intended:

Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not «printed».

The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did. great hack, thank you very much 🙂

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:

Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.

Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!

Here it is a full printable HTML page for bootstrap:

     /* Both z-index are resolving recursive element containment */ [background-color] < z-index: 0; position: relative; -webkit-print-color-adjust: exact !important; >[background-color] canvas    
 
 
 
 
Hey. this works !
 
 
Ohh. this works recursive too !! 
Any size !!
 
 
 
 
 
 
Some content.
 
 
    

Источник

CSS display:none and visibility:hidden – What’s the Difference?

Dillion Megida

display:none and visibility:hidden are two style declarations you can use to hide elements on the screen with CSS. But what are the differences between them?

When building applications, there are times that you want to hide elements visually (not deleting them from the DOM, just the screen). You can do this in different ways.

Two common approaches include using the display property with a none value or the visibility property with a hidden value.

Although both approaches hide the element visually, they cause the element to behave in different ways. I’ll explain these differences in this article.

Here is the video version of this article if you’re interested.

Here’s the example I’ll use to explain how this all works:

.container < padding: 20px; width: max-content; display: flex; border: 1px solid black; >.block1, .block2, .block3 < height: 40px; width: 120px; >.block1 < background-color: rgb(224, 110, 49); margin-right: 20px; >.block2 < background-color: rgb(77, 77, 234); margin-right: 20px; >.block3

We have a div with a class of container. This div has three children div s with classes of block1, block2 and block3, respectively. We’ve specified some styles for the divs . The first div child is orange, the second is blue , and the third is teal .

How to Use display: none in CSS

The display property sets how an element is displayed (as inline or block) and also determines the layout of the children of an element (as flex, grid, and so on).

With a none value for this property, the display for the element is turned off. This means the element – as well as its children – will not be displayed. The document is rendered without the element like it did not exist.

Now let’s see how display: none works. Here is an example with this style applied to the .block2 element:

As you can see here, the .container element has reduced in width. It’s just like the .block2 element does not exist. Because we used display:none on this element, it is not rendered in the document. So its space on the screen becomes vacant for other elements to occupy.

We can also test this by moving adding display:none to the .block1 element:

Here you see that .block1 and .block2 are not rendered, so their spaces are occupied.

How to Use visibility: hidden in CSS

The visibility property, as the name implies, specifies whether an element is visible or not. But, this property does not affect the element’s layout. This is the major difference when compared to the layout property.

With a hidden value for this property, the element it is applied to becomes «invisible». The space required by the element’s box model stays but the element itself is hidden.

Let’s see how this property applies to our example above. Here is the result of this style applied to the .block2 element:

As you’ll notice here, unlike display: none , the .block2 element is invisible, but its layout stays intact. In fact, the margin-right on this element is still there. Only the element itself is hidden.

Let’s also add this style to .block1 to see the result:

Now both elements are invisible, but they are still rendered in the document so their space is not vacant.

The next thing you may be thinking is that «what is the difference between visibility: hidden and opacity: 0 ?»

visibility: hidden vs opacity: 0

Both styles look very similar. I can show you this by replacing visibility:hidden with opacity:0 in our above examples:

You can see that there’s no difference visually between this result and the previous one. But there is a difference in the behavior of the elements.

Elements with visibility: hidden are non-interactable. I don’t know if this is the best word for this 😂 but what I mean is that users cannot interact (for example, by clicking) with such elements. That’s because such elements are indeed invisible.

Elements with opacity: 0 on the other hand are interactable as they are actually visible, just very transparent. The opacity property doesn’t specify the visibility of an element – it only specifies transparency.

We can verify this difference with an example. Let’s say the .block2 element had an onclick attribute like this:

If you use visibility:hidden on this element, clicking on the space where the element is will trigger nothing. But if you use opacity:0 on this element, clicking on that same space will trigger the alert modal showing the «hello» text. You can test this on your browser to see this live.

Use Cases for display:none and visibility:hidden

These style declarations can serve different purposes depending on what you want to achieve.

In my experience, I use display:none when I want to hide anything. Think of hiding a popup, a todo list item on the UI that has been checked, or the sidebar in a page.

Using visibility:hidden for these things causes their space to be retained, and it could make a page look odd when there’s a blank space.

The only times I use visibility:hidden is when I want to display some animation while I «hide» or «show» an element. The display property does not animate between values but the visibility property can. I use visibility in combination with opacity for such fade in and fade out animations.

Wrap up

In summary, display:none , visibility:hidden , and opacity:0 can be used to hide elements visually but:

• display:none turns off the layout of the elements, so they are not rendered
• visibility:hidden hides the elements without changing their layouts
• opacity:0 causes the elements to be very transparent but users can still interact with them.

If you enjoyed this article, please share it with others to learn 😇

Источник