Option with Background
transparent and at the same time appears when printing.
Of a Ctrl+P that you will see that even in the "Print Mode" of the Browser the image will be at the bottom of the Table.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 200px;
height: 200px;
}
.container table{
background-image:linear-gradient( rgba(255,255,255,.7) 0%,rgba(255,255,255,.7) 100%), url("http://placecage.com/200/200");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0.3;
display: none;
}
@media print {
.container table{
background-image: none;
}
.container img {
display: block;
}
}
<div class="container">
<table border="1">
<thead>
<tr>
<th>Item 1</th>
<th>Item 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto 1</td>
<td>Texto2</td>
</tr>
</tbody>
</table>
<img src="http://placecage.com/200/200" alt="">
</div>
Other options of background
with opacity, but they are not optimized for printing are just examples.
Young man I’ll give you a solution without using opacity, but using two Background in the table. One eats the image, and over the image one overlay white with RGBA color and opacity of 80% (vc can put the value you want in linear-gradient
).
The way you did, you’re putting opacity on the whole table, not just the background.
See in Snippet that you will understand my solution.
table{
background-image:linear-gradient( rgba(255,255,255,.8) 0%,rgba(255,255,255,.8) 100%), url("http://placecage.com/200/200");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 200px;
height: 200px;
}
<table border="1">
<thead>
<tr>
<th>Item 1</th>
<th>Item 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto 1</td>
<td>Texto2</td>
</tr>
</tbody>
</table>
Another transparent image option at the bottom of the table without affecting the content with a pseudo element ::after
table{
width: 200px;
height: 200px;
position: relative;
}
table::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .3; /* controla a opacidade da imagem */
z-index: -1;
background-image: url(http://placecage.com/250/250);
background-repeat: no-repeat;
background-size: 100%
}
<table border="1">
<thead>
<tr>
<th>Item 1</th>
<th>Item 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Texto 1</td>
<td>Texto2</td>
</tr>
</tbody>
</table>
poe dynamically, over, applying direct opacity to the image, calculates the height and width of the table, and makes a js that centers on the meat and applies opacity.
– Leandro RR
I edited the answer with a template that prints the image at the bottom of the table. Just copy it into your project and test.
– hugocsl