When you hover on div, background-color applies to entire div. I want to exclude h2 and I want to keep the h2 text black without background color.
<style>
.Blog-header-content:hover {
background: rgb(237, 177, 196) none repeat scroll 0 0 important;
opacity: 0.4;
}
h2 {
color: #000;
}
</style>
<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
Actually, all <h></h> tags are inside the <div></div> tag and when you fade its opacity, the texts fades too.
here is a trick to do the the same thing without fading the text.. just remove the opacity tag from div and add opacity to colors.
To show <h2> tag without fade
just change rgb(237, 177, 196) to rgb(237, 177, 196,.4) and remove opacity(0.4) hope this will work
.Blog-header-content:hover{ background: rgba(237, 177, 196,.4) none repeat scroll 0 0 !important ;}
h2{color:#000;}
<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
If you want to show h2 tag without background color then just put it outside that div tag
.Blog-header-content:hover{ background: rgba(237, 177, 196,.4) none repeat scroll 0 0 !important ;}
h2{color:#000;}
<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
</div>
<h2 class="Blog-title">helloooooooooooooo</h2>
Well you can use this to remove background from h2 on hover on div
.Blog-header-content:hover{ background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;opacity:0.4;}
.Blog-header-content:hover h2{ background: #fff!important ;}
h2{color:#000;}
<div class="Blog-header-content">
hihihihhihhihihihhiihhihih
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
but when it comes on opacity if you reduce opacity of main div then the child elements will also use the parent's opacity.
So if possible you can do it with a bit of html change like this
.Blog-header-content:hover{ background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;}
.Blog-header-content:hover span{ opacity:0.4;}
.Blog-header-content:hover h2{ background: #fff!important ;}
h2{color:#000;}
<div class="Blog-header-content">
<span>hihihihhihhihihihhiihhihih</span>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
If you change parent opacity, child opacity property will be from its parent opacity. Eg:
parent{opacity:0.8;}
child{opacity:0.8;} // that's means it is 0.8 of parent opacity, so it's 0.64
So i sugget if it's possible to wrap other content in additional tag, and add opacity attribute to it & additionally set background for h1:
.Blog-header-content:hover{ background: rgba(237, 177, 196,0.4) none repeat scroll 0 0 !important ;}
.Blog-header-content:hover p {opacity:0.4}
h2{color:#000;background:#fff;}
<div class="Blog-header-content">
<p>hihihihhihhihihihhiihhihih</p>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
Or just set background only for new tag:
.Blog-header-content:hover p {opacity:0.4;background: rgb(237, 177, 196) none repeat scroll 0 0 !important ;}
h2{color:#000;}
<div class="Blog-header-content">
<p>hihihihhihhihihihhiihhihih</p>
<h2 class="Blog-title">helloooooooooooooo</h2>
</div>
Related
I am trying to make my css a:links only affect the body. When I add my CSS it affects all links including my menu and logo. Is there a way to do that?
Thanks
a:link {
text-decoration: none;
background-image: linear-gradient(to bottom, #FEF5DF 0%, #FEF5DF 100%);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 111%;
transition: background-size .25s ease-in;
padding: 2px 2px 0px 0;
border-bottom: 2px solid #E2DDCA;
transition: all 0.3s;
}
a:hover {
background-size: 100% 88%;
cursor: pointer;
border-bottom: 2px solid #f8cd5f;
transition: background-size .25s ease-in;
}
Everything on your html page is contained within the body tag, so if you style your links, they're going to affect those links everywhere.
If you just want to style the links in a specific block, wrap that block in a div, give it a class, and then target a links within that class.
<body>
<div class="my-content">
My Link
</div>
<div class="everything-else">
My Link
</div>
</body>
CSS:
.my-content a:link { ...styles here...}
.my-content a:hover { ...styles here...}
Add a class to specific links you want to affect and then add the CSS to that class as follows:
HTML
link 1
link 2
link 3
And then your CSS would be as follows:
.mylink{
/*your css*/
}
I have the following code:
.wrapper {
background-color: rgba(0,0,255,1.0);
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
}
<div class="wrapper">some text<span class="inner">other text</span></div>
My intention was that the <span> would have a light red color but instead I got red blended with the wrapper blue.
Is there any easy way to make this work as I expected?
you can put the same span just behind the actual span, but with a white background-color. However, it's not a sustainable solution, and you should not use rgba color to do that.
Due to the use of rgba(255,0,0,0.5); you have an alpha option which causes semi transparency, your best bet is to simply use rgb(255,0,0); without the alpha or optionally set your alpha to 1 rgba(255,0,0,1);
Keep another element that is a wrapper to your span. and give it background white.
.wrapper {
background-color: #5555ff;
position: relative;
padding: 20px;
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
display:block;
}
.fake{
display:inline-block;
background: #fff;
}
<div class="wrapper">
some text
<div class="fake">
<span class="inner">other text</span>
</div>
</div>
Alternate solution:
You can give this color #ff8080 to your span which does not have transparency. It will give the same effect.
Best way is probably to just use a color without opacity, other than that you could just wrap the highlight color with a white background wrapper...
.wrapper {
background-color: rgba(0,0,255,1.0);
}
.inner {
background-color: rgba(255, 0, 0, 0.5);
}
.inner-wrap {
background-color: #FFF;
}
<div class="wrapper">some text<span class="inner-wrap"><span class="inner">other text</span></span></div>
When both box shadow and background color exist for a link or button, IE shows a white line around it. Any idea what it is?
There is no other styling apart from what is used below. I checked in debugger tools of IE11 and chrome.
It does not happen with outline and background-color, just box-shadow and background-color.
JSFiddle here (To be run on IE, I used IE 10)
//css
a,button {
background-color: #61C250 !important;
color: white !important;
border-color: transparent !important;
outline: 0 !important;
box-shadow: 0 0 0px 2px #61C250 !important;
text-decoration: none;
}
//html
Random Link
<hr/>
<button>Random Button</button>
IE shows a white line around it. Any idea what it is?
That appears to be a bug in IE, where its anti-alias effect for the elements edge picks up the color from the element behind it.
If you set the body's background to red, the white line becomes red
body { background: red; }
a,button {
background-color: #61C250 !important;
color: white !important;
border-color: transparent !important;
outline: 0 !important;
box-shadow: 0 0 0px 2px #61C250 !important;
text-decoration: none;
}
Random Link
<hr/>
<button>Random Button</button>
So, i'm trying to set the Bootstrap Panel-Heading to be transparent.
Because of the z-index i cannot figure out how to do it.
The panel-heading is on-top of panel-default.
HTML
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
</div>
CSS
.panel-default{
background: rgba(255, 255, 255, 0.9);
}
.panel-default .panel-heading{
background: rgba(255, 255, 255, 0.0);
}
.panel-default .panel-body{
background: rgba(255, 255, 255, 0.95);
}
I've tried to make the whole panel (panel-default) transparent,
and then gave the body a white color. Problem here is that the panel-body isn't cover the whole space below the heading. I just got a white area where i have some content/text.
If i make the panel-default solid white, i cannot "get thru" it with transparent panel-heading. Because the heading is on-top of the panel-default.
UPDATE
So my problem is that i'd like the heading to be transparent, but the body to be solid. AND the body to cover whole space below panel-heading.
EDIT
I tried to set height for panel-body to 100% but it's still not covering the whole space below panel-heading.
UPPDATE
The problem on the panel-body aint cover whole space was because i had set the panel-default height. I should had set the panel-body height instead!
Use below CSS , may be it can be help to you.
CSS
.panel-default{
background: transparent;
}
.panel-default .panel-heading{
background: transparent;
}
.panel-default .panel-body{
background: #fff;
}
I am working on a webpage and I want to put a button on a transparent div that shows the background image. But when I place the button it is also transparent. How can I make it not transparent?
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
Use the rgba() color method instead of opacity:
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
<input type="button" value="Ok">
</div>
</div>
With opacity, the effect applies to the entire element, including child elements and content.
From MDN:
[Opacity] applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
The exception to this rule is background-color set with rgba().
The rgba() color model allows for the opacity to be set via the alpha channel.
So you could set the parent to div { background-color: rgba (255, 255, 255, 0.6); }, and that would set the opacity to 0.6 on the background-color alone. Child elements would be unaffected.
Learn more here: A brief introduction to Opacity and RGBA
For opacity and images see:
Can I set an opacity only to the background image of a div?
CSS: set background image with opacity?