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.
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
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.
Alright, I am designing a website using XHTML 1.0 Strict and CSS 1,2,3. And, I have a container for the page, that contains every div within the container, I have min-height specified on the container to ensure expanding of the page.
But, I have another container within the page container that contains a content div and sidebar div and all 3 of the containers inside the content container are set to height: inherit; and all have a min-height.
On the container which includes both the content and sidebar divs, I have a background gradient image which is positioned at the top and center, but am also calling out a background color which I want to continue as a sort-of fade-out effect, which would leave the container open for page expansion.
But, the problem is, the color is not repeating all the way down within the container.
You may view the design below, it is linked with a pretty well organized External Style Sheet. As well as the HTML page being well organized.
http://www.noxinnovations.com/portfolio/kolja/
Thank you very much StackOverflow,
I hope to hear from someone very soon,
Aaron Brewer
I'm not 100% sure if i understood your problem.
But adding:
this
float: left;
to this:
#content-container
Should do the trick.
That link gave me a 404 Page not found.
Perhaps you mean that you want to stretch the background-image using css? In that case I can tell you that such a thing is impossible. You cannot stretch css background images.
Usually when you want a gradient background you make a sufficiently long gradient and fill the rest of the background with the ending color of the gradient.
CSS 3 supports defining gradients as colors. W3C working draft of gradients.
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.
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.