See http://i40.tinypic.com/2nv4gol.png for example image.
I have a span element (blue background in example image) that contains other span elements (red background in example image). Currently, the inner spans' red background color take precedence over the container span's blue background color.
I need the container span's blue background color to take precedence over the inner spans' red background color.
Can I do something with the container span's z-index and fiddle its opacity? Any help would be appreciated.
maybe you can define a new css for the inner spans, make it transparent background and add a !important to the CSS rule, like, if the inner spans are class 'x' ...
.x {background-color:transparent !important}
Well, you could try setting the container to position: relative; z-index: 1; and the inner ones to position: relative; z-index: 0;, but I think that would hide the text behind the background colour too.
I think more information on why you are trying to do this would help give a better answer than this, but maybe you could have some JavaScript remove the background colour of the inner spans? Like I said, it depends on what you're doing, exactly.
Related
I've been struggling to understand the CSS interaction in a project I've been working on. Here's a codepen recreating it and the css I've used.
Codepen
.container
/*background is set to emulate the real use case*/
background red
height 400px
width 600px
position relative
display flex
justify-content center
align-items center
opacity 0.9
.blurred
background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
height 100%
width 100%
position absolute
filter blur(7px)
z-index -1
.text
font-size 35px
text-transform uppercase
color brown
/*this div is for comparison.
at 0.9 opacity the white background under it is
not visible yet the image under .container is clearly
visible at 0.9 opacity */
.comparison
height 400px
width 600px
background red
opacity 0.9
The idea here is that I wish to have an image with blur applied to it but also have text over it that's not blurred. The .container doesn't technically need a background color set but for the sake of recreating the issue exactly the way I encountered it I've set it's background color to red.
So according to my understanding lowering the opacity on .container makes .container and all its children more transparent. That is to say the lower it goes the easier it is to see the white background beneath all the elements. What I don't understand is why does the opacity also make .container fully transparent. I can clearly see the background image trough it. What I expected was for container to be filled with red and just barely showing the image inside. Instead .container has no filling color and I can clearly see the image.
I've made another div as a comparison. It's just a div with 0.9 opacity and nothing else. It doesn't lose it's background color like .container does.
I hope I've explained my question thoroughly enough. I've been trying to wrap my head around this for days now!
Background color goes behind the contents not on top, which is why it's called "back" ground. So your red background is behind your .blurred and .text.
When you set a background image of .banner class, that element is on top of background color. The reason your comparison div does not lose as much color is because there is nothing in front of background color. If you set the opacity of .blurred to reduce it's opacity and offset the competition you will get desired effect.
If you want the red background color to "lay on top" of the blurred background image, you can try adding it as a gradient "image" like this:
background-image linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,.9)), url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.
Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 40%.
HTML
<div class="heart-wrap">
<div class="heart" style="height: 40px; margin-top: 60px;">
</div>
</div>
CSS
.heart,
.heart-wrap {
width: 100px;
height: 100px;
}
.heart {
background: transparent left bottom url('/heart.png');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/
Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.
I am not going to paste the code as I hope that is not so important here.
an image is placed against a colored background (background made colored by background-color property ). surprisingly blue border is shown around the image.
What is the secret? how can i remove the border?
tnx beforehand.
Istiaque Ahmed
Bangladesh
Is the image inside a link (<a>)? That tends to put a blue border around the image. You can remove it by setting a border: 0 on the image (or some class the image is in).
Let me guess, the image is inside an a tag?
A border shows up for an image that is a link unless you explicitly remove the border.
You can remove the border with css:
img {
border: none;
}
I want the style to apply on the "a" elements, and not the img.
Here's an example:
a:hover {background: #555;}
I tried to do something like this:
a:hover img {background: none;}
though I knew it's not going to do anything.
The solution I found in this question didn't work for me, because the "display: none" is moving the image when hovering.
The img is inside the anchor, so wouldn't the background be outside the image no matter the background in the image element. Does the image have padding, margin or transparency?
I'm not sure what you're asking here.
If you put a background colour on an A tag that surrounds an image you'll never see the background because the image covers it up.
If you want to display the background colour and hide image when you mouse-over you can do it like this (insert your own image dimensions, filename etc.):
a {
display:block;
height:100px;
width:100px;
background-image:url(Images/sample.gif);
background-color:#555
}
a:hover {
background-image:none;
}
a:hover img { background:none }
means that when someone hovers over the A your IMG is in, the IMG background will be set to none--which means it will show your A's background, since it contains the IMG. (IMG is clear, A has background, but IMG is within or 'on top of' A; therefore, we see A's background). If your image is transparent in parts, A's background will show through.
The best solution may be
a {background:#555;}
/* set image to the background color of the layer you want to get back to */
a:hover img { background:#fff; }
The background isn't inherited by the image inside the link. Removing the background from the image doesn't do anything as it doesn't have any to start with.
If you are trying to "punch a hole" in the background where the image is, that is not possible. You would have to put other elements inside the link to fill up the space that is not occupied by the image, and set the background on those elements instead.
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}