is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.
Here is the CSS.
.email {
background: url(../images/email.gif) 0px 0px no-repeat;
margin: 0px 0px 0px 0px;
text-indent: 20px;
display: inline-block;
}
.email:hover {
opacity: 0.8;
}
Here is the xHTML.
Email
Short answer: No.
Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
For background images, use a PNG with alpha channels.
Not with a background image (you can if it's just a background color). Instead of using opacity, replace the background image with less opaque version in .email:hover.
Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!
<div id="TransContainer">
<div id="TransBox" href="#">Some text that will be opaque!</div>
<div id="NonTransText">Some text that I do not want opaque!</div>
</div>
<style>
#TransContainer
{
position: relative;
z-index: 100;
display: block;
width: 420px;
height: 165px;
background-color: blue;
}
#TransBox
{
background-color: green;
display: block;
width: 100px;
height: 100px;
opacity:0.4;
filter:alpha(opacity=40)
}
#NonTransText
{
color: #000;
position: absolute;
top: 20px;
left: 0;
}
</style>
Related
This question already has answers here:
How to set opacity in parent div and not affect in child div? [duplicate]
(7 answers)
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 3 years ago.
I have a div that has a background-image, I would like its hover effect to change its opacity without affecting the child element, in this case the <p>. I have seen similar answers to my question, but having a background does not work the answers. opacity to an element with background affects the children, I only want to affect the father
How can I solve that?
<div class="container_img">
<p>
this is a text
</p>
</div>
.container_img{
position:relative;
border:1px solid red;
margin-top:-14px;
display: table;
margin-top:2px;
width: 709px;
height: 141px;
background-image: url("https://i.imgur.com/VBOZfaY.png");
background-image: url("https://i.imgur.com/VBOZfaY.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.container_img:hover{
background-color: transparent;
opacity:0.5;
}
this is my code:
https://jsfiddle.net/t98mbxca/
In this case opacity is working as expected as it changes the alpha channel for the element and all of its contents. You may need another approach. Looks like you just want a green gradient button?
I changed the div to a button and removed the p tag in the HTML.
For the background you can use pure CSS to create a linear-gradient as a background-image using rgba for the colors so you can change the alpha (opacity) on hover.
.container_img {
height: 50px;
line-height: 50px;
padding: 0 60px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
background-image: linear-gradient(rgba(130, 167, 99, 1), rgba(102, 146, 63, 1));
}
.container_img:hover {
background-image: linear-gradient(rgba(130, 167, 99, 0.5), rgba(102, 146, 63, 0.5));
}
<button class="container_img">
this is a text
</button>
The easiest way, if you want to use an actual image, is to move your background image to a pseudo element.
.container_img {
position: relative;
border: 1px solid red;
margin-top: -14px;
display: table;
margin-top: 2px;
width: 709px;
height: 141px;
}
p {
position: absolute;
left: 50%;
font-size: 50px;
}
.container_img::before {
content: '';
background-image: url("https://i.imgur.com/VBOZfaY.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container_img:hover::before {
opacity: .5;
}
<div class="container_img">
<p>
this is a text
</p>
</div>
I'm trying to create a button that has many layers - consequently I'm having to make use of pseudo elements.
To clarify, my button is actually an anchor <a>.
I've run into an issue with one of the pseudo elements. I'm trying to give it a background while retaining a touchable target outside of the background. In order to do this, I've applied a background-clip over the content.
Everything works apart from the corners, which are applied but just not the shape I was expecting.
Button 2 is the design I'm trying to crack - by ensuring the pseudo perfectly overlays the element.
I now think I know what is happening but don't know why and how to fix it.
The padding is 6px deep, the border radius 10px. The radius is being calculated as 4px deep and 10px wide.
Any advice appreciated.
div {
margin-bottom: 20px;
}
a, a::before {
box-sizing: border-box;
}
a {
background-color: red;
border-radius: 10px;
color: white;
display: inline-block;
height: 36px;
line-height: 36px;
min-width: 100px;
position: relative;
text-align: center;
z-index: 1;
}
a::before {
background-color: rgba(0, 255, 0, 0.5);
border-radius: 10px;
content: "";
display: block;
height: 48px;
padding: 6px 0;
position: absolute;
top: -6px;
left: 0;
width: 100%;
z-index: -1;
}
.button2::before, .button2a::before {
background-clip: content-box;
}
.button2a {
margin-left: 20px;
}
.button2a::before {
background-color: blue;
}
.button3::before {
background-clip: content-box;
border-radius: 50%;
}
<div>
<p>This is a button with no background-clip - border-radius applied as expected<p>
<p><a class="button1">button 1</a></p>
</div>
<div>
<p>This has same border-radius as above, but background-clip applied on content - overlay doesn't completely disappear - leaves odd shapes at corners as can be seen on blue button. I was expecting 10px corners to mirror center</p>
<p><a class="button2">button 2</a><a class="button2a">button 2</a></p>
</div>
<div>
<p>This has same background-clip applied but uses a percentage for border-radius - seems to work as expected</p>
<p><a class="button3">button 3</a></p>
</div>
I'm trying to create a button that has many layers
What about doing things differently and instead of using pseudo element you can rely on multiple background to have multiple layers:
a.button1 {
background:
linear-gradient(to right,transparent 50%,blue 0),
linear-gradient(to bottom,orange 50%,transparent 0),
red;
border-radius: 10px;
color: white;
display: inline-block;
height: 36px;
line-height: 36px;
min-width: 100px;
text-align: center;
}
<a class="button1">button 1</a>
I wondered if it was possible to create two background-colors for a div an overlay them.
I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.
Without understanding why you want this, it can be done by using solid color gradients: fiddle.
body {
background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
linear-gradient(white, white); /* first bg is on top of this */
}
Though Adrift's answer is the way to go, you can also use pseudo elements for this.
body {
background: white;
position: relative;
}
body:before {
content: "";
position: absolute;
top: 0;
left; 0;
width: 100%;
height: 100%;
background: rgba(220,14,120,0.5);
z-index: 1;
}
/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
z-index: 2;
position: relative;
}
Here is a fiddle.
However, this is not production friendly:
Setting position relative on body and all other elements when not necessary
Setting unnecessary z-index on all elements
The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.
You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:
JSFiddle
HTML
<div class="one">
<div class="two"></div>
</div>
CSS
div {
width: 100px;
height: 100px;
}
.one {
background-color: #fff;
}
.two {
top: 0;
left: 0;
background-color: rgba(0,0,255,0.2);
}
To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.
Although I would consider a different method like this:
Structure:
<div class="parent">
<div class="white"></div>
<div class="color"></div>
</div>
CSS:
.parent {
position: relative:
}
.white, .color {
position:absolute;
top: 0px;
left: 0px;
}
.white {
z-index: 9998;
}
.color {
z-index: 9999;
}
You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.
To achieve multiple background colors in CSS, a common proposal is
Solid Color Gradients
But there is an alternative:
Solid Color background-images via SVG Data URIs
The working example below contains the following areas with the following background colors:
<main> - dark-gray
<section> - light-gray
<div class="circle"> - translucent red
In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.
We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.
The Approach
The approach is to give div.circle.does-not-blend:
the same initial background-color as <main>
an SVG Data URI background-image with the same translucent red background-color as the other .circle elements
The SVG background-image
The SVG Data URI background-image looks like this:
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E
The Result
In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend
Working Example
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
padding: 0 9px;
background-color: rgb(127, 127, 127);
border: 1px solid rgb(0, 0, 0);
}
section {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0 0 66%;
background-color: rgb(191, 191, 191);
height: 162px;
}
.circle {
display: inline-block;
width: 120px;
height: 120px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 120px;
background-color: rgb(255, 0, 0, 0.5);
border-radius: 50%;
}
.circle.does-not-blend {
background-color: rgb(127, 127, 127);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
<div class="circle"></div>
<section>
<div class="circle">Incorrect</div>
<div class="circle does-not-blend">Correct</div>
</section>
</main>
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
I have a background image and want to add a transparent fill color on top of that. I use modern browsers like Firefox and Google Chrome.
This code works (but does not solve the problem)
background: url('bkg.jpg'), rgba(0,0,0, .5);
This code don't work (but should solve my problem)
background: rgba(0,0,0, .5), url('bkg.jpg');
Why? Solution?
https://developer.mozilla.org/en/CSS/background says:
Note: The background-color can only be defined on the last background,
as there is only one background color for the whole element.
http://www.w3.org/TR/css3-background/#layering says:
The background color, if present, is painted below all of the other
layers.
http://www.w3.org/TR/css3-background/#background-color says:
This property sets the background color of an element. The color is
drawn behind any background images.
Maybe you could use the :before/:after pseudoelements instead with absolute positioning.
http://jsfiddle.net/3mNkZ/3/
div {
background: rgba(0,255,0, .5);
width: 200px; height: 200px;
border: 10px solid red;
position: relative;
font-size: 100px;
color: white;
}
div:before {
background: url('http://placekitten.com/200/150');
content: ' ';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
You have to make a div that is the same size as the window to get the effect.
Here is a jsfiddle and the code below.
html{
background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg');
}
.color {
background-color: rgb(100,0,0);
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}