I made a div with a background, in this case bg-secondary, I want to set the background's transparency to 0.6, however, I don't want to make the text inside of the div more transparent, only the background
I tried to override the bootstrap setup making a css style called bg-secondary with an opacity of 0.6 but it also makes the text more transparent and I don't want that, I just want the background more transparent
My div:
<div class="text-light bg-secondary">
<h3>hi</h3>
<h5>lorem ipsum<br></h5>
</div>
Style
<style>
.bg-secondary {
opacity: 0.6;
}
</style>
Sorry for such basic question but I am getting really confused.
Opacity will affect the children of the selected element...instead use rgba colors to set translucent backgrounds.
Example:
Instead of this:
.bg-secondary {
background-color: #000;
opacity: 0.6;
}
Try this:
.bg-secondary {
background-color: rgba(0, 0, 0, 0.6);
}
Yes, use css rgba(red, green, blue, opacity) to set opacity exclusively on the parent element's background property.
But note that Bootstrap v4 sets css:
.bg-secondary {
background-color: #6c757d!important;
}
Also, because hexadecimal rgba() is still lacking comprehensive browser support, it's advisable to convert hexadecimal #6c757d into it's decimal equivalent. In your case the Bootstrap override would be:
.bg-secondary {
background-color: rgba(108, 117, 125, 0.6) !important;
}
For your style to override bootstrap's style definition, you must define it after the bootstrap stylesheet and use the !important post-fix as well.
Here's a working fiddle.
Related
I'm trying to have a navbar and a body with the same color, using RGBA. Unfortunately, when I use the exact same color on the nav and the body, using css variables to make sure it's right, I get a different result in the two elementss.
Minimal example down below. I'd like the background to foo to be the same as the background to bar, and don't understand why it isn't.
There's additional additional complexity that makes it suboptimal for me to take the obvious solution, namely to let the nav element just inherit from the body. See below the snippet for explanation.
:root {
--main-bg-color: rgba(172, 196, 165, 0.75);
}
body {
color: #333;
background-color: var(--main-bg-color);
}
.navbar-default {
background-color: var(--main-bg-color);
border: none;
}
<html>
<body>
<nav class="navbar-default">foo</nav>
bar
</body>
</html>
Additional relevant information: I'm overriding some Bootstrap classes with the nav, and I would prefer not to just build and host my own local version of bootstrap to get this right. The upshot is that I can't just drop the background-color on the nav and let it inherit from the body. If I drop my own css it gets the color from miserable bootstrap defaults and ends up white. I guess I can go and get a local bootstrap if I have to, but there must be a better way.
All you have to do is make .navbar-default transparent.
:root {
--main-bg-color: rgba(172, 196, 165, 0.75);
}
body {
color: #333;
background-color: var(--main-bg-color);
}
.navbar-default {
background-color: transparent;
border: none;
}
<html>
<body>
<nav class="navbar-default">foo</nav>
bar
</body>
</html>
As mentioned above, the transparency setting at 75% (0.75) looks to be the issue as essentially 25% of the background behind your body will bleed through. If this is not the case you may want to check that:
1) you don't have any "style" attributes in your HTML that would be overwriting your CSS
or
2) you don't have any CSS below this that is inherited by the nav or body.
the 0.75 at the last said color is the transparency, I tried removing it on jsfiddle and now it works... same color
:root {
--main-bg-color: rgba(172, 196, 165);
}
Here it is, I removed the 0.75 as it is the transparency of the color.
While one element is over the other, the transparency of 0.75 makes the difference.
The transparency is defined by the alpha value of RGBA and is the last value:
rgba(172, 196, 165, 0.75)
More about rgba:
https://en.wikipedia.org/wiki/RGBA_color_space
https://css-tricks.com/the-power-of-rgba/
Think of making 2 layers in a photo editor filled with a color and then 75% transparency value, and then overlap them.
Also think what color may be behind the body element, that can differ from browser to browser, so a full color may be more consistent here.
I am reading the book: CSS Secrets: Better Solutions to Everyday Web Design Problems. And encountered this part where the color setting css can work for every potential background colors. The css is as follows:
.button {
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 50px;
line-height: 1.5;
width: 2.5em;
}
.greenButton {
background-color: #6b0;
}
.redButton {
background-color: #c00;
}
The Jsfiddle link: https://jsfiddle.net/mr7kwxsm/. This does work. But I don't know how... How does the background color pass as a parameter to hsla and rgba color settings? They seem to be fixed values there. And since transparent is the last variable in linear-gradient. I am not sure how this is working. Can someone please help to explain a little bit?
Not sure what you are asking but I think you want to know how does your element get a color of green and red where you've defined another color using hsla() in gradient which is bluish with a gradient overlay.
So it goes like this. Your .button class holds a shorthand property of background where you specify a linear-gradient which is nothing but a background-image and you also specify a hex of #58a. If you split this shorthand you will read it like
.button {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
background-color: #58a;
}
Now further down you declare couple of more classes with their background-color so when you use .button and .greenButton on the same element, browser overrides the background-color of .button with .greenButton and that's how you get different colors using a common .button class and you override them by defining other classes.
.greenButton {
background-color: #6b0; /* Overrides your #58a when you call
this class with .button */
}
Order in your CSS does matter. If you move the declaration
of .greenButton and .redButton above .button, your buttons will
always be of default color which is bluish.
Demo
After you commented, you asked that why your borders adapt the colors, so the thing is that you use rgba(0,0,0,.1) for your border which is equivalent to a hex of #000 with an opacity i.e alpha of 0.1. Now since the your borders are opaque, you can see your background-color being rendered behind that.
Now I can explain you how borders work but I think it's not in the scope of this question.
The class .button makes use of the property background to set various properties (colour and transparent gradient). In the classes for .greenButton and .redButton you only overwrite the background-color element. Therefore, all properties that are not part of the background-color element remain intact.
The background of a lot of websites is not actually white: it's more of a greyish color:
How do they do this? Is it just a picture they made or is there some CSS?
Short answer: Picture and CSS: both are possible.
Long answer:
To add a background image, you will have to do something like
body {
background-image: url('bgpic.png');
}
where bgpic.png is the image that you want to use as a background.
I believe using a background image for a simple background as this one will only increase your loading time, and in turn, frustrate your users. The CSS alternative is faster and easier, as you might have probably guessed from the other answers.
In CSS, you can style your background like this:
body {
background-color: #efefef;
}
Or, as someone pointed out, use the rgb equivalent:
body {
background-color: rgb(239, 239, 239);
}
And might I add that it is also possible to specify the transparency of the background. Say, you have a background picture, and you have a <div class="foo"> that could use a semi-transparent background; then you would do something like:
body {
background-image: url('bgpic.png');
}
.foo {
background-color: rgba(0, 0, 0, .5);
}
Notice that the last value given to rgba is the % transparency that you want. It is a value less than 1.
Here's a JSFIDDLE.
http://jsfiddle.net/ccnZt/
body {
background: rgb(248,248,248);
}
Just CSS.
body {
background: #f0f0f0;
}
Notice that if the website does not specify a background color, your browser will display a default color. Older browsers used grey colors, while new browsers use white.
They could have used either a picture image or CSS; either setting the background image with an image of that solid color or setting the background color with RBG colors through CSS.
body {
background-image: url('yourbgimage.jpg');
}
or
body {
background: rgb(244,244,244);
}
If you want to set your background to this color (or any other solid colors), it's better to go with CSS as it will load faster and improve the user experience!
I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.
Any ideas how to fix this?
You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)
Use instead of:
opacity: 0.6;
this:
background: rgba(255, 255, 255, 0.6);
The color is in RGB and the last digits are for the transparency level.
You'll need to position your transparent div absolutely.
http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.
Opacity is inherited. If the parent is see through, so are the children.
A better way to do this is to remove opacity and set the background color to be transparent:
.foo {
background: rgba(0,0,0,.5);
}
You should use transparent background, instead of opacity.
Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)
Use data-uri for better performance.
You could even do it with opacity. Here's an example:
HTML
<div id="wrapper">
<div id="contentOrWhatever">
</div>
</div>
CSS
body {
z-index:0;
}
#wrapper {
z-index:1;
opacity:0.6;
}
#contentOrWhatever {
z-index:99;
opacity:1;
}
So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever.
Hope I could help you.
Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
Thankyou !!!
It's much easier to use rgba() or a transparent PNG for the background.
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
You can use rgba() property for this:
write like this:
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
For IE you can use IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
You can generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.
Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
Align your markup carefully such that the markup resembles what you want.
Why don't you reset the opacity then?
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.
If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.
With CSS3 you could do this:
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
and just the background would be 0.1 opacity. The text would still be 1.
What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).
something like http://jsfiddle.net/PWM5f/ you need