1

I want to print (in browser) a div with 2 pictures on it. One div (#pic1) has a background-image of a lion, the other div (#pic2) is the same picture, but styled with "-webkit-mask-box-image" and a background-color (kind of color overlay in Photoshop).

HTML code looks like:

<section id="page">
  <div id="pic1">
  </div>
  <div id="pic2">
  </div>
</section>

In browser, everything looks fine. Just like I want. See picture below.

picture with and without -webkit-mask-box-image

But once I want to print my page, the second div (#pic2) is kind of gone. I only see a black rectangle. See picture below: enter image description here

Is there a way to have a nice printable version of my second div?

Thanks in advance!

Jasper Poppe
  • 481
  • 2
  • 7
  • 16
  • In the [-webkit-mask-box-image documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image) it says this: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. – Thanasis1101 Feb 07 '17 at 01:01
  • Maybe someone can come up with a fix if you at least post the css you use, or better a [mcve]. – yezzz Feb 07 '17 at 01:09

0 Answers0