I am using following CSS code:
.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255); */
}
.rounded_box h1{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
And I want to have h1 and other elements as opaque that are inside div having class rounded_box . But is also making h1 and other elements transparent that I don't want.
So what can be the solution for this?
The opacity: 0.6 in .rounded_box will be applied to all child elements (thus the .rounded_box h1. So the h1 opacity:1.0 is really only 100% of the parent (0.6).
What you could do is use rgba to define the background color of .rounded_box, which does not affect children.
If are only looking for a transparent background on the rounded box element, use the following code:
.rounded_box{
...
background-color:rgba(128,193,255,0.6);
...
/*filter:alpha(opacity=60); Remove this */
}
.rounded_box h1{
...
}
A workable hack is to set all of your text within an absolute positioned div that is a sibling to the container you wish to be transparent. Position it absolutely over the container, set the Z index, and make sure your parent element is positioned relative.
Basically there's no magic bullet for this. Unfortunately, the opacity is inherited down to all children of an element with opacity, and there's no way to set opacity to "120%" to overcome 80% opacity on a parent element.
My comfort zone would be to have a containing div with no opacity, which holds 2 sub divs: one to hold the bg image, rounded edges, opacity, etc; and its sibling to hold the content. I'd use JavaScript to force the height of the opaque div to be the height of the content div, then I'd absolutely position the content div over the opaque one.
OR
I'd just use alpha transparent PNGs as the background image of the rounded box, assuming I didn't have to conditionally change their color or anything. You can do this and still accomodate variable widths and heights too, if you are willing to cut out the top/bottom/sides/corners separately.
Related
In the following fiddle, I am trying to find out why the div where the checkbox is placed is bigger than the content itself (which is only the image of an empty checkbox). I am trying to accomplish the same as seen on the fiddler but without the overlapping of the white background over the border of the underlying .
I think the problem is related to this css style:
.selectable-content label:after {
background: white;
color: #9fc5e8;
content:"\f096";
position:absolute;
}
You'll have to play with some of the bottom values in your media queries, but your white background was due to default line-height on the label.
http://jsfiddle.net/xtm9D/11/
Added:
.selectable-content > label {
padding-top: -5px;
font-family:'FontAwesome';
font-size: 32px;
cursor: pointer;
line-height:26px;
}
Messed around with your media queries as well.
The element created by :after contains the character, but also has a white background. As this element later in the DOM and positioned at the bottom-right of its parent, it will overlap the background.
This could be fixed by creating a translucent picture of the actual image, and removing the white color from the CSS.
Try setting the line-height. When I add the line
line-height: 31px
to
.selectable-content > label {...
the problem is resolved. I initially set line-height: 32px, but there was still a pixel of white. You are going to need to find a consistent way to position the element and set the line-height in relation to the checkmark character to resolve the overflow.
I have a div and it has a background image. But I finally understood that I forgot another background for the div that goes at the bottom. so I used the :after pseudo and inserted one.
The background that goes in the :after was supposed to be a transparent image that fades well with the background of the body. But now the background of the parent div is getting behind what is in the :after pseudo element.
Could there be any way I would make the background of the parent div not to show in my :after pseudo element?
Edit
here is my code
.foo{
height: 30px;
padding-bottom: 20px;
background: url(i/myimage.png) no-repeat;
}
.foo:after{
display: block;
position: absolute;
right: 0;
background: url(i/pseudo-elem-bg.png) no-repeat;
content: ' ';
height: 20px; /*takes the bottom padding
}
The ::after pseudo element adds an element which is the last child of the parent selector, not a sibling (hence, an element after the selected one), so it is just natural that the background of the parent shows up if the child background is transparent.
You might need to use another solution than the pseudo-element, such as a real element perhaps. Seeing the current code you have might help finding the best solution for your case.
If you're creating a pseudoelement just to add another background, you could set multiple backgrounds instead, and they will shown in the order you have set it.
Something like:
div {
background: url(bg.png),
url(otherbg.png);
background-position: center top,
center bottom;
}
You could use other background properties and sort them in the same way.
I have a div in which there is an a tag.
I gave opacity:0.5 to the div then the text inside opacity is also 0.5
I don't want to use background image, then how can I have a text with opacity:1 inside my div with opacity:0.5 ??
Set the background color of the parent using rgba (includes alpha transparency). Example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
If you want to use a background-image, just set the opacity on the image itself (use a PNG).
You can't. The real child opacity can't be greater than its parent's opacity in the HTML rendering model.
From the documentation (emphasis mine) :
Opacity can be thought of as a postprocessing operation. Conceptually,
after the element (including its descendants) is rendered into an RGBA
offscreen image, the opacity setting specifies how to blend the
offscreen rendering into the current composite rendering.
You must put your child div outside the parent div. This is usually achieved using a different kind of positioning than the static one.
Use a totally different <div> for the text.
<div id="parentDiv">
<div id="mainDiv">
</div>
<div id="childDiv">
Hello
</div>
</div>
CSS
#parentDiv
{
position:relative;
}
#childDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#mainDiv
{
width:100px;
height:100px;
opacity:0.5;
}
Check it out : http://jsfiddle.net/AliBassam/aH9HC/ I added background colors so you can notice the result.
Since I'm forcing you to use absolute, I don't want you to have a problem with positioning the text, so make some mathematical calculations to get the best position:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).
Like the answer above states, you'd need a separate div for the text, absolutely positioned to fit over the opaque div. You might want to set the z-index to something high as well.
Warning: this solution will work only if you want outer element to be completely transparent.
Instead of opacity: 0 and opacity: 1 use visibility: hidden and visibility: visible
Worked in my case (may not work in yours but it's worth the shot) :)
I have an element in a div that I'm having some problems giving a margin-top.
Instead of moving the element in the div, I can only get it to move the entire div.
It's the purple circle that I want to give a margin-top.
http://jsfiddle.net/9J8R5/
#step1 {
width:100px;
height:100px;
border-radius:50px;
background-color:#5020B8;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top:1em;
font-size:60px;
color:#ffffff;
font-family:Cusmyrb;
line-height:105px;
text-align:center;
padding:0;
}
The margin-top doesn't appear on the child element the way you expect because of margin collapse.
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Source: https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing
If you really want the margin-top to exist on the child element, either of these additions will do it for you:
#competeinfo {
border: 1px solid transparent;
}
http://jsfiddle.net/9J8R5/5/
Or
#competeinfo {
overflow: hidden;
}
http://jsfiddle.net/9J8R5/6/
Otherwise, padding on the parent element is probably the best choice.
For how the CSS box model works, check the W3C
To fix your problem you have two options:
use margin, as you mentioned, but add some content before the circle. E.g. jsFiddle
use padding-top on #completeinfo, instead of margin-top. E.g. jsFiddle
I want to use background image and color for the same element
but id doens't work even I use the css like this question
here's my css
http://jsfiddle.net/xdkwB/
Your CSS is working correctly, both the image and background colour sit within the one container so because they're the same colour, you can't actually see the arrow.
The best way to solve this is to use an outer div that wraps your header element, like so:
<div class="outer"><h1></h1></div>
And then style with appropriate CSS:
div {
float: right;
width: 198px;
background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);
background-position: 0px;
background-repeat: no-repeat;
margin-top:21px;
}
h1{
color:white;
font-size: 170%;
font-weight: normal;
font-family: arial;
width:189px;
height:33px;
line-height: 33px;
background-color: #b21f23;
float:right;
}
So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour.
I don't think you can get your desired result with just one element styling.
You would either need to have the background-image outside of the element, which is not possible.
Or you would need the background-color to not fill all of the element, which is also not possible
The best option IMO, would be to have two elements with a background-image in the first, and background-color in the second
http://jsfiddle.net/xdkwB/11/
Example with text:
http://jsfiddle.net/xdkwB/13/
Example floated right:
http://jsfiddle.net/xdkwB/14/
try this
background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;
this will add the background image and everything else will be your background color
You've set the background colour to the same colour as the image. So it's there, you just can't see it because it blends in.
You're arrow is the same color as te background. You can positioning the background with background-position and with a negative left value it become outside the box: