If I have a div that acts like a box, and I make it real sexy with 10% opacity. How do I counter it since everything in the div also gets the opacity. Lets say i have a box(div) with a 1px border and text, putting opacity on it will make it look bad and i only want opacity on the background.
This is how you can apply opacity on background colors only, and not to the whole element and his children:
background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity
you can test it out here:
http://jsfiddle.net/ypaTH/
there was a similar question here:
How to give cross browser transparency to element's background only? (with IE version)
The contents of an element that have opacity inherit that opacity. You'll need to break it into two pieces: the background and the contents. Absolutely position the contents on top of the background. Your contents cannot be within the opacity element.
You could use a semi-transparent PNG image for the element's background. You'll need a fix such as Supersleight for IE6 support.
Related
My web page contains with a background image and a tranparent card-panel on top of it. Is it possible to only darken the background image while keeping the brightness of the area under the transparent card panel the same?
depends on how the position and the shape of card you usually can. What I should do is:
-- create a pseudo element for the HTML element having the background image
-- stretch the pseudo element out to fit the whole area of the parent element
-- make sure that the pseudo element stay under the parent content (the card) in your case
-- Make the pseudo element look darker by adding a background to it, using linear-gradient.
By using linear-gradient, you can control which part of the background image look darker than the other part, the part which you don't want to look darker should have linear-gradient value as transparent. This technique will work fine most of the time for normal shape/position however, it has its own limit. I leave it for you to research how to use them.
In case you are not used to these terms and techniques, I put a few links below:
Pseudo element:
https://www.w3schools.com/css/css3_gradients.asp
Linear Gradient as background:
https://www.w3schools.com/css/css3_gradients.asp
Here's the test case:
https://jsbin.com/gerujabope/1/edit?html,css,output
Should .test be transparent (affected) or not?
Note: current state:
Chrome, FF (latest): transparent
IE11: opaque
Would be great if experts can point out what standards say.
Update: opened IE bug: https://connect.microsoft.com/IE/feedback/details/2116899
I think it should indeed be transparent, since you are adding opacity to the whole DIV element.
If you only want the bgcolor of the DIV to be transparent, then you can use RGBA in the background property, so the child DIV won´t inherit it.
still busy to learn HTML5 and CSS for my school project. But got a question and i'm stumped.
The image and links i have in my nav bar, the face with text, gets transparent. Even though it's not in the same div, nor class as the header itself, which has an opacity value.
the post is, the image AND links should be completely visible, and on TOP of that background opacity.
In advance, sorry for the probably shoddy coding and naming of classes.
Here's the links:
actual site
html/css
your header div has opacity set to 0.7 so that results in everything inside it being semi transparent.
if you want only your header background to be transparent, you can either add the transparency directly to your header background-image. or you could use an rgba background color, if your header background should be a semi transparent specific color. (http://css-tricks.com/rgba-browser-support/)
if all of that doesn't suit your needs, you could always get fancy with something like shown in here: http://css-tricks.com/snippets/css/transparent-background-images/
I agree that the essential problem is that you have one div nested inside another.
Although your .flub class has its opacity set to 1.0, the only div it applies to is inside a .header div, with an opacity of 0.7. So your .flub div is displaying with 100% of the available capacity, which is only 70% due to it being nested within your .header div (which is set to 70% opacity). Consider setting the opacity of the other elements separately, rather than setting the opacity of the entire .header div.
I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.
http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/
Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).
How about background-clip: padding-box;?
Demo
i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either
if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck
CSS background fills the area of the border, with the border-color layering over this.
As you have a transparent border, it is displaying the background-color behind it.
With plain HTML/CSS, I'm not sure there is a way around this.
This jsFiddle demostrates this:
http://jsfiddle.net/hq65C/8/
try this:
<span style="background: red">link</span> test test test <br/>
test test test
notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.