Menu
I have a div, and an image inside it. on the image I have the DB results, designed and placed with relative location on each div.
I want to cover some of the results (the most interesting one with color overlay), see image bellow:
How should I do it without adding another div on top of it?
backgroup will not help here, because the image is higher z index than the div..
I want to be able to do it as easiest as I can with CSS, because I will get the property from the DB query , and set the class for the relevant result rows..
Does someone has creative idea please? :)
Thanks.
557
If you just want your element to be transparent, it's really as easy as : background-color: transparent; But if you want it to be in colors, you can use: background-color: rgba(255, 0, 0, 0.4);
To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
The CSS color name transparent creates a completely transparent color. Using rgba or hsla color functions, that allow you to add the alpha channel (opacity) to the rgb and hsl functions. Their alpha values range from 0 - 1.
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).
div {
position: relative;
}
div:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 0, 0, .5);
}
You can also change the top, right, bottom and left values to offset the overlay from the image borders.
62
well, with all the restrictions you have, the only thing I can think is this:
div{background:#f00}
img{opacity:.5}
not very elegant, but will work
29
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
