Is it possible to set the opacity of a background image without affecting the opacity of child elements?
Example
All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.
HTML
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
CSS
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
}
What I've Tried
I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:
#footer ul li {
background: url(/images/arrow.png) no-repeat 0 50%;
/* will also set the opacity of the link text */
opacity: 0.5;
}
I also tried using rgba, but that doesn't have any effect on the background image:
#footer ul li {
/* rgba doesn't apply to the background image */
background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
You can use CSS linear-gradient() with rgba().
div {
width: 300px;
height: 200px;
background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
background: black;
color: white;
}
<div><span>Hello world.</span></div>
Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.
This will work with every browser
div {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.
Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
If you are using the image as a bullet, you might consider the :before pseudo element.
#footer ul li {
}
#footer ul li:before {
content: url(/images/arrow.png);
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}
You can put the image in the div:after or div:before and set the opacity on that "virtual div"
div:after {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
opacity: 0.25;
}
found here
http://css-tricks.com/snippets/css/transparent-background-images/
#footer ul li {
position: relative;
opacity: 0.99;
}
#footer ul li::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url(/images/arrow.png) no-repeat 0 50%;
opacity: 0.5;
}
Hack with opacity .99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.
Demo of this technique.
Unfortunately, at the time of writing this answer, there is no direct way to do this. You need to:
use a semi-transparent image for background (much easier).
add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.
Another option is CSS Tricks approach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.
To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).
/* color or background image for all browsers, of course */
#myBackground {
background-color:#666;
}
/* target chrome & safari without disrupting IE7-8 */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#myBackground {
-khtml-opacity:.50;
opacity:.50;
}
}
/* target firefox without disrupting IE */
#-moz-document url-prefix() {
#myBackground {
-moz-opacity:.50;
opacity:0.5;
}
}
/* and IE last so it doesn't blow up */
#myBackground {
opacity:.50;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!
we can figure out that by not playing with opacity just by using rgba color
e.g "background-color: rgba(0,0,0, 0.5)"
Sample :
Previous Css:
.login-card {
// .... others CSS
background-color: #121e1b;
opacity: 0.5;
}
To :
.login-card {
// .... others CSS
background-color: rgba(0, 0, 0, 0.5);
}
If you have to set the opacity only to the bullet, why don't you set the alpha channel directly into the image? By the way I don't think there is a way to set the opacity to a background image via css without changing the opacity of the whole element (and its children too).
Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.
convert your hex colours to RGBA
I found a pretty good and simple tutorial about this issue. I think it works great (and though it supports IE, I just tell my clients to use other browsers):
CSS background transparency without affecting child elements, through RGBa and filters
From there you can add gradient support, etc.
#footer ul li
{
position:relative;
list-style:none;
}
#footer ul li:before
{
background-image: url(imagesFolder/bg_demo.png);
background-repeat:no-repeat;
content: "";
top: 5px;
left: -10px;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.5;
}
You can try this code. I think it will be worked. You can visit the demo
I have wrote a code stuff to show a spinner reloader image with overlay. The code is working fine but the problem is that the image seems behind the overlay and is not in the real color also the Loading... text is not coming with the reload image.
My code is as given below
Can anyone please tell me some solution for this
Working Demo
html
<div ng-app='myApp' ng-controller="Controller">
<div id="darkLayer" class="loader ng-hide" ng-show="loader">Loading...</div>
<button ng-click="show()">Show Progress</button>
</div>
script
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.loader = false;
$scope.show = function () {
$scope.loader = true;
};
});
css
.loader {
background-color: #FAFAFA;
filter: alpha(opacity=50);
/* IE */
opacity: 0.5;
/* Safari, Opera */
-moz-opacity: 0.50;
/* FireFox */
z-index: 1000;
height: 100%;
width: 110%;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://i.stack.imgur.com/K8MeK.gif);
position: absolute;
top: 0px;
left: -13px;
}
The loading text is there (top left corner), you just didn't position it to center.
The image is not behind the overlay, but it's opacity is set to 50%, thus the change in color.
For example, here it is without the overlay, the gif is still transparent.
If you want the gif to show with full opacity (and the text also) but keep a transparent overlay, you can use RGBA background-color, like so (live demo):
background-color: rgba(250, 250, 250, 0.5);
I've modified the fiddle you've posted. Please take a look. You have to have an alpha channel in your background color instead of opacity on the entire loader.
The reason why your loader text is not in the right position is that you haven't positioned it to be in the specific position you want! I've fixed this in the below fiddle. Please see how it's done and try to adopt it to your requirement.
Working demo
What I am attempting here is to have multiparty choices for the user to choose between allowing the background to change. I don't have a solid color background but instead a gradient background. The user input is radial buttons and I have the onClick set to function colorthatisbeingchanged(). Then the function would be used to change the background gradient color. I thought about assigning variables to be changed but I don't know how to use them within CSS. I also tried attempting something like this but it hasn't worked either.
document.getElementById("body1").style.background = radial-gradient(red, black);
my CSS for the body reads:
#body1
{
height: 137%;
margin: 0;
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-radial-gradient(purple, black);
background: -o-radial-gradient(purple, black);
background: -moz-radial-gradient(purple, black);
background: radial-gradient(purple, black);
}
For Full Site to view click Here I'm Sure I will be back asking more questions eventually.
Thanks Everyone!
-Blake
In JavaScript, strings must be delimited with quotes:
target.style.backgroundImage = "radial-gradient(red, black)";
Demo
When a user clicks a link which has an image as a background, I need an onClick event that changes the background position of it. This is the link:
Favorite
It's already set in css and there are two states, regular and hover, with hover being shifted by 12px.
a.favorite {
width: 15px;
height: 12px;
background: url(img/icon-fav.png) no-repeat;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-indent: -300px;
}
a.favorite:hover {
background-position: 0 -12px
}
When I click the image once, I need the background position to be set the same as the hover state.
I'm doing that like this, and it works:
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
But when the link is clicked again, I need it to switch back to the normal background position and I can't get that to work. This is the function I'm trying but it only works for moving the background to "0 -12px", not for moving it back to its original position.
function favoriteBusiness(id){
if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
document.getElementById("favorite_1").style.backgroundPosition = "";
else
document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
}
Can someone point me in the right direction here?
Unless you're making calculations, you're better off adding and removing classes that contain the new position. This is usually what's done for manipulating CSS sprites.
There is a link, with no background, and a css rule, which changes background on hover.
Parent bg is white, link on hover - .png background image.
How can I do a hover effect slowly, from white to my background image?
Thanks.
li a {}
li a:hover { background: url(image.png) 0 0 no-repeat; }
CSS
li {
background: #FFF;
}
li a {
opacity: 0;
display:block;
height:200px; /* Image height */
width:200px; /* Image width */
background:transparent url(image.png) top left no-repeat;
}
JavaScript
$(function(){
$("li a").hover(function(){
$(this).stop();
$(this).animate({"opacity":1}, "slow");
}, function(){
$(this).stop();
$(this).animate({"opacity":0}, "slow");
});
});
See http://docs.jquery.com/Effects
One thing that comes to mind is strategically placing layers with backgroundimage set and layers with solid color on top of each other, and on hover, animating the Opacity property of the right thing (if the thing on top becomes transparent, the thing on bottom comes through).
Transparent is not valid in IE.