background color and opacity

457 views
Skip to first unread message

Ravi Bhatia

unread,
Dec 3, 2013, 11:20:54 PM12/3/13
to dom...@googlegroups.com
Hi I am trying to print text inside the div with div's opacity 0.5 and text color black. The problem is box is printing with correct opacity but the text-color is not black it is light grey which I think because of opacity.
Can anyone please help me to fix this issue. I have attached the sample pdf. so please have a look
Thanks.
dompdf.pdf

BrianS

unread,
Dec 5, 2013, 11:14:57 PM12/5/13
to dom...@googlegroups.com
Opacity applies to all contained elements, so your text is appropriately faded. Unless your HTML is different than I imagine, so always be sure to post your HTML source. Check out the following in your browser and rendered to PDF:

<body style="background-color:orange;">
<div style="background-color: gray; opacity: .5em; padding: 1em;"><b>WAT WAT</b></div>
</body>

FYI, there is a bug related to cascading though I don't think it's relevant: https://github.com/dompdf/dompdf/issues/496

If you only want your background to be opaque you would use something like background-color: rgba(192,192,192,.5).

<body style="background-color:orange;">
<div style="background-color: rgba(192,192,192,.5); padding: 1em;"><b>WAT WAT</b></div>
</body>

Unfortunately dompdf doesn't support rgba() yet.

So a little work around:

<body style="background-color:orange;">
<div style="background-color: gray; padding: 1em; opacity: .5;"><div style="opacity: 2;"><b>WAT WAT</b></div></div>
</body>

Which really shouldn't work ... but it does. There are some quirks around opacity that still need to be addressed.
Reply all
Reply to author
Forward
0 new messages