Apply watermark without affecting text

Asked

Viewed 9,335 times

3

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

Follows 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 is nothing different, it’s a normal table.

Any tips on how to solve this problem? I have no way to put this image on body because in a leaf will stay 3 card, then in each card has to have its mark.

inserir a descrição da imagem aqui

html css

  • 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.

  • 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.

2 answers

4


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

inserir a descrição da imagem aqui

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>

  • Thank you very much.

  • Hugo, it worked with the first option, but the image in the print presentation. I’ve already put it in @media print and nothing. Any hints?

  • Yeah, look at my other answer. https://answall.com/questions/269790/imprimir-p%C3%A1gina-com-background/269803#269803 by default printers do not recognize images or colors used as background. There explains how to solve the problem. But if you prefer I can make an adaptation in my code to let the image appear in print.

  • Since you offered, adapt your code. The one from your example reslve, but it puts an image in the center of the page and not in the center of the Tables, or I got it wrong.

1

Wrapping the contents of the table with a div, then applying the background and opacity to the div, would work?

HTML

<table>
    <div id="marca">
        ...
    </div>
</table>

CSS

div#marca{
    background: url("../../../assets/img/empresa/business_logo.png");
    opacity: 0.5;
}

table {
    /* regras para a tabela */
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.