SUMMARY: Depending on what is needed it can be tricky but the basic approach is pretty straight forward. This approach is a little different from my first thought… but this has the same result. I made a black/transparent pattern for the circle and set it to :before. The circle is then transformed rotate(180deg) and moved … Read more
I’ve never seen that as “overriding” or “underriding”. It’s a matter of relative opacities. If the parent has an opacity of 0.5, the child has it too (in relation to the parent’s stacking context). The child can have its own opacity value between 0 and 1, but it will always be relative to the parent’s … Read more
Don’t use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this. .content { padding:20px; width:710px; position:relative; background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */ background: rgba(204, 204, 204, 0.5); } See http://css-tricks.com/rgba-browser-support/ for more info and … Read more
You can use opacity in combination with background color, like this: #container { border: solid gold 1px; width: 400px; height: 200px; background:rgba(56,255,255,0.1); } #box { border: solid silver 1px; margin: 10px; width: 300px; height: 100px; background:rgba(205,206,255,0.1); } <div id=”container”> containter text <div id=”box”> box text </div> </div> Live demo
Just add this code to your image css body{ background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2); } Reference: linear-gradient() – CSS | MDN UPDATE: Not all browsers support RGBa, so you should have a ‘fallback color’. This color … Read more
Either use a semi-transparent PNG or SVG image or use CSS: background-color: rgba(255, 0, 0, 0.5); Here’s an article from css3.info, Opacity, RGBA and compromise (2007-06-03). Beware that the text still needs sufficient contrast with the background, once the underlying background shines through. <p style=”background-color: rgba(255, 0, 0, 0.5);”> <span>Hello, World!</span> </p>
You can achieve this with this simple CSS/HTML: .image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } HTML <div class=”image-container”> <img src=”http://lorempixel.com/300/200″ /> <div class=”after”>This is … Read more
Another solution would be to use -webkit-backface-visibility: hidden; on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow’s has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes. See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.
I am also looking for an answer to this question, (to clarify, I want to be able to draw an image with user defined opacity such as how you can draw shapes with opacity) if you draw with primitive shapes you can set fill and stroke color with alpha to define the transparency. As far … Read more