Menu
Good evening.
I wanted to ask, that is it possible to overlay table row with some transparent color and text?
Something like this:
I found from stackoverflow that its possible to overlay over using css, but never managed to get it to work.
If its possible, maybe someone can point me to right way.
For example how to overlay middle table row with transparent color and text here:
<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
https://jsfiddle.net/gx2vpm62/ ?
Thanks in advance.
715
We can create an overlay simply by adding a color above an image, decreasing its opacity. For example, create a div tag and give it an id main . Then, create a div inside the header and give it a class overlay . Next, create a paragraph p and write some text.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.
Put your images in there with position: absolute and set top: 0; left:0 . Next you will have to specify z-index to show one on top of the other. You might want to use other properties such as width, height, overflow, display to get the result you are looking for.
You can do this by using an absolutely positioned element in the table. I don't know about cross browser support for this solution and the spacing is static.
.overlay {
position: absolute;
background: rgba(255,0,0,0.7);
left: 0.7em;
right: 0.7em;
height: 1.2em;
text-align: center;
}
tr {
position: relative;
}<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="overlay">Text</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
