I am trying to make text inside a transparent div have no opacity, aka be completely black:
<div style="opacity:0.6;background:#3cc;">
<p style="background:#000;opacity:1">This text should be all black</p>
</div>
Is this possible to do with only CSS?
Thanks in advance
The easiest way is to style the background of the parent div with opacity/alpha:
div {
background: #fff; /* for browsers that don't understand the following rgba rule */
background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */
}
This is not, however, compatible with IE.
For IE >= 7 compatibility, you could use:
div {
background-image: url('path/to/partially_transparent.png');
background-position: 0 0;
background-repeat: repeat;
}
I recall that IE < 7 has a proprietary filter option, but I'm afraid I can't recall how it works. So I've omitted any attempt to describe/show it. If I can find a useful reference though I'll add it in later.
As noted by easwee the opacity is inherited by contained elements, which is why you can't override it, and is why I prefer to use the background-color/background-image approach.
The child elements inherit the opacity. What you could do is to position the <p> outside the opaque div and set a negative margin to move it over it.
I came across this problem often and usually solved it like this. Problem is only when you have dynamic content and the div has to expand.
Does the background consist of a solid colour? If so, you could also use RGBa to select a transparent background colour for the div that isn't inherited by its the children. Read RGBa Browser Support for more information, a workaround for IE and another solution.
If the background of the div isn't solid, you can use a transparent PNG as background. Remember to use AlphaImageLoader in IE6 (and 5.5).
Related
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
How do i make the h1 and img elements "appear" ontop of the opaque div they are contained in? I mean, how do I make it look like they are not being affected by the opaque-ness of their parent div?
Fiddle:
<div id="main">
<div id="seethru">
<img ... />
<h1>hi</h1>
</div>
</div>
#main {
background-color: green;
}
#seethru {
width: auto;
height: auto;
opacity: 0.4;
background-color: blue;
}
#seethru img, h1 {
position: relative;
z-index: 9999;
color: white;
}
So far nothing is working, and I can't separate this content, it must be inside the opaque div
You are using opacity property which will make it's child elements opaque too, so in order to prevent that use rgba(0, 0, 255, .4) and that will prevent child elements to get opaque.
Explanation for rgba : rgba() is nothing but pure rgb(red, green, blue) but with an additional parameter of a which is alpha, nothing but opacity, so you can use this as an alternative when you are dealing with background colors
Demo
There are few workarounds where you can prevent child elements from getting opaque, for example
For details on browser support of rgba (For IE, you can use CSS3 Pie)
Note: When you use background-color: rgba() always remember to use a
fall back color declared using a hex or pure rgb so that
non-supportive browsers won't fail to render at least the base color
but without opacity, alternatively you can also use transparent png's as a
background with background-repeat property(But this is 90's way to
do) ;)
As #Adrift Commented, You can read here, why actually the child elements get opaque too
internet explorer up to IE8 doesn't supports the RGBA colors. So it would be better if you place h1 and img element outside the opaque div and then move it visually inside using CSS positioning.
Check out this great tutorial it will certainly solve your problem.
http://www.tutorialrepublic.com/css-tutorial/css-opacity.php
I'm trying to create an effect where the border of my DIV object has a horizontal left-to-right gradient fade. The perspective of the gradient must encompass all borders (not just top and bottom)
All the documentation I came across so far describes how to do it vertically
Thanks
All the other answers have just pointed you to a CSS-generator.
While Colorzilla does a great job at applying vendor-prefixes, the core CSS for it is really simple. Though, I do believe you can get better cross-browser compatibility by using pseudo-elements instead of borders in this scenario. This is how I do it:
Start with a simple div:
<div class="top-gradient-border">
Lorem ipsum
</div>
Basic CSS:
.top-gradient-border {
width: 200px;
height: 30px;
/*other irrelevant styling in here*/
}
Add the gradiented border (this example shows you how to do it for a border-top, change the pseudo-element for other sides):
.top-gradient-border::before {
content: "";
background-image: linear-gradient(to right, white, black);
height: 1px; /*for horizontal border; width for vertical*/
display: block;
}
You can learn more about CSS gradients on CSS-Tricks.
Colorzilla allows you to produce gradients using CSS - no graphics files involved. It also works reliably across many browsers.
http://www.colorzilla.com/gradient-editor/
Photoshop
But check this out, it might just do the trick for you (plus its GUI)
Colorzilla
I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.
If not, how do I fix this?
Source & Demo here:
http://jsfiddle.net/joshuamcginnis/2aJ8X/
Screenshot:
The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.
Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.
overflow:hidden; does not work
but this does:
h2
{
position:relative;
z-index:-1;
....
}
It's not specific to background gradients. It's just the background of the h2 element overlapping sitting on top of the rounded corners. I'm not sure it's a bug in the strictest sense, but it is fairly well known. Easiest 'fix' is rounding the corners of the element with the background. Example: just setup for chrome
I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<html>
<head>
<style type="text/css">
.everything
{
background: url(/images/shield-25.png) blue no-repeat center;
}
table, div{ width: 100% }
#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">
<table id="table1"><tr><td>Top</td></tr></table>
<!-- This table put a big white line over my watermark image. -->
<table id="table2"><tr><td>Middle</td></tr></table>
<table id="table3"><tr><td>Bottom</td></tr></table>
<div id="div1"><tr><td>Top</td></tr></div>
<!-- Thought maybe it was a table thing but nope, divs do it too. -->
<div id="div2"><tr><td>Middle</td></tr></div>
<div id="div3"><tr><td>Bottom</td></tr></div>
</body>
</html>
Unfortunately for you, this is the intended behavior. background-image and background-color are sub-properties of the background property. Since you defined a background on #table2 and #div2, you can't see "through" them to the page background anymore.
CSS3 allows you to set the opacity of the background using the rgba() expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use a filter: rule such as the following:
#table2 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}
Note how the startColorstr and endColorstr parameters have a fourth value for alpha.
There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".
You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html
However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.
You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.
If you want to apply the watermark to each element individually, you should do something like this:
#table1, #table2, #table3, #div1, #div2, #div3 {
background: url(/images/shield-25.png) blue no-repeat center;
}
or maybe
table, div {
background: url(/images/shield-25.png) blue no-repeat center;
}