Apply watermark without affecting text

Navigation
2

I put an image inside a table representing the watermark, but when I add opacity to the table all content is affected.

Follow CSS: 

table{
  background:url("../../../assets/img/empresa/business_logo.png") no-repeat; 
  background-size: 100% 100%;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50;
}

The table has nothing different, it's a normal table.

Any tips on how to solve this problem? I can not put this image in body because on a sheet it will get 3 cards, so in each card you have to have your mark.

    
asked by anonymous 06.02.2018 / 13:47

2 answers

2

Option with Background transparent and at the same time appears at the time of printing.

FromaCtrl+Pyouwillseethateveninthe"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 opacity% options with opacity, however they are not optimized for printing are just examples.

Young I'll give you a solution without using opacity , but using two Background in the table. A comma the image, and above the image a white overlay with RGBA color and opacity of 80% (you can put the value you want in background ).

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 content with a pseudo element linear-gradient 

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>
    
06.02.2018 / 14:04