I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
Related
How can I set visibility:hidden for only one of my multiple background images in CSS?
.app1 {
background-image: url(../img/photo1.png),
url(../img/photo2.png);
background-size: 17em, 27em;
As Toni has said visibility: hidden wouldn't work. However if you want to make it so that the image does not show up, you could use the background-size, and just make it 0em.
You cant do visible:hidden that on multiple backgrounds you can hide the whole div. One hack I did was to use the background size to get to it
/*CSS */
.app1 {
background-image: url(../img/photo1.png),
url(../img/photo2.png);
}
//JS
$('.app1').css({'background-size':'0 0, 27em'});//to hide photo1.png
$('.app1').css({'background-size':'17em, 0 0'});//to hide photo2.png
This is the way to do it till we have some more background specs coming up ;)
You can't.
CSS properties apply fully to the selector that they are written in, so both background images will be affected by visibility: hidden; (just as they are both affected by the background-size declaration.
You could however nest two HTML elements within each other, then apply a background image to each and add visibility hidden to either of them as necessary.
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
I'm trying to recreate something like this for one of the forms on my site by using opacity to make the form field background only 20% visible, but when I do this it also affects the text on the inside, and when you type something in. How can I make the opacity apply only to the background?
opacity will always affect all included (child) tags. You may put 1px png image with required color and 20% visibility in background (or, if that is some image there, not jus solid color - change alpha for the whole image). And looks like that is what you need (I finally understood that I should look at image instead of site design available by your link))
Another option is to put some div with opacity below other tags using css position, z-index etc. But in this case there should be one, for instance, div which contains all your content that should not be transparent and another div with opacity near it
Give a different class for the Field and Make opacity for field 100%
I wish to create breadcrumbs that employ css arrows, and want to apply a gradient on the background, but have been unable to set a gradient for the css triangles themselves.
I'm wondering if I can set an opacity on the triangles , and then lay them over top of a div with the desired background gradient. This also has to be compatible down to IE7. So far no luck. Does anyone have any suggestions?
Use PNG image for the arrow. Arrow image must have transparent background.
The best way to achieve what your looking for would be to use an image. IE7 I don't think supports opacity without some javascript manipulation. Use a gif or another type of image with transparent background.
This is how you set opacity or <=IE8
.triangle {
filter: Alpha(Opacity=80); // ie argh!
opacity: 0.8; // standard browsers
}
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.