We Keep Coding

How to change opacity of backgroundImage using "INLINE CSS" in react project without affecting the text on the image [duplicate]

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

Can you fix a div and make it change opacity, size and position as you scroll with CSS3

I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible.
The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.
Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3.
Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.
Here's a fiddle of what I have so far. Haven't started on scrolling yet:
HTML
<div id="stuff">Blahblah</div>
CSS
div {
width:250px;
height:250px;
border:2px solid #a1a1a1;
}
JavaScript
$( "#stuff" ).click(function() {
$( "#stuff" ).animate({
width: "20%",
height:"20px",
opacity: 0.4
}, 1500 );
});
http://jsfiddle.net/thed0ctor/1kx5jg1e/

You could do this easily with a combination of CSS3 transform and a bit of Javascript / jQuery:
Demo Fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/
Relevant CSS:
#hanger {
width: 200px; height: 200px;
background-color: #00f;
position: fixed; /* Position fixed important */
top: 10px; right: 10px;
opacity: 1;
transition: 0.5s all; /* Animate transitions */
}
#hanger.dim { /* Style to make it appear dimmed */
transform: scale(.75); /* Make it smaller */
opacity: 0.5; /* Make it dimmer */
}
#hanger.dim:hover { /* To change back on hover only when it is dimmed */
transform: scale(1); /* Back to original size */
opacity: 1; /* Back to original opacity */
}
Relevant jQuery Code:
$(window).on("scroll", function() { /* When window scrolls, */
if ($(window).scrollTop() > 50) { /* Check if it scrolls more than 50 pixels */
$("#hanger").addClass("dim"); /* Apply class dim */
} else {
$("#hanger").removeClass("dim"); /* Otherwise remove class dim */
}
});
Hope that helps.
.

Pseudo code only:
window.scroll(function(){
if (window.scrolltop > selectedElement.offset().top){
selectedElement.animate({
transform: scale(.75),
opacity: .5
position: fixed
});
}else{
selectElement.animate({
transform: scale(.75),
opacity: 1
position: static
});
}
});
The links provided in the he pseudo code should point you in the right direction.

How can I create Javascript Buttons with Themes?

I have a button which is attached to a js action. It currently uses <a onMouseUp="..."><img.... The problem is that I want the buttons to be able to change the images depending on the theme (i.e. css file). Since the image is specified in the html itself, this doesnt work. Does anyone know how to implement this?

Instead of having the image in the HTML, you should assign it as a background on the anchor element, as defined in a stylesheet.
a.example {
display:inline-block;
height:20px;
width:20px;
background-image:url(/images/buttonExample.png)
}

That's an easy one (assumed I understood your question):
a) Create your images for the states you want:
a.1 - standard display;
a.2 - mouse over; (hover)
a.3 - mouse down; (active)
b) Define the many different buttons in your css:
b.1 - themeCities
.tcButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tcButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tcButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
b.2 - themeNature
.tnButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tnButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tnButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
and so fourth.
You should consider sprites otherwise you are going to end up with an unmanageable amount of images. Another consideration is on the size of the buttons: width and height.
I can help on sprites, ... if needed. There are free websites that manage that for you. I am a control freak and use Adobe Fireworks for all my sprites needs as far as creating the sprite images.
Then, still with the images or sprites in mind, you might want to use a css-ninja suggestion on how to accelerate the images pre-loading:
.body:after {
content: url(image-url-1) url(image-url-2) url(image-url-n);
display:none;
}
Trick on creating sprites:
a) make sure background is transparent and save them either as gif or png32;
b) make sure they are the same sizes for the three states otherwise you are going to have jittery displays;
c) once all the images are done, assemble them in a large transparent background image;
d) space them in that new large transparent image; aligning them top and left;
e) give some space between each image. Some suggest 50 pixels between images side-by-side and top-down. I don't follow that. I just give some space between them.
f) the most difficult task in hard coding sprites: write down it's coordinates in the large transparent image: top, left, width, height.
To use a sprite image you go like this (as one of many variations):
.msSprites { background: transparent url(url-of-the-sprite-image.gif) no-repeat;
top left; } /* msSprites = my site sprites */
.tcButton { background-position: 0 0; width:100px; height: 24px; }
.tcButtonHover { background-position: 0 -150px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tcButtonActive { background-positon: 0 -300px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tnButton { background-position: -150px 0; width:100px; height:24px; }
/* margin-left at 150px; margin-top at 0 px .. in the large transparent image */
... and so fourth
Application:
Regular images:
<button class='tcButton' onClick ....>This is fun</button>
Sprites:
<button class='msSprites tcButton' onClick ...>This is even more fun</button>
The sprite, in this case, is formed of the big transparent image and the location of the button you want to use.
I hope I have really confused the heck out of you .... or opened your thinking cap wide open.
Good luck!

If you are using jQuery you could change the image tags source attribute.
<img src="oldImageSrc.jpg" />
Then in the javascript method:
function changeButton() {
$("img", this).attr("src", "newImageSrc.jpg");
}

Nivo slider thumbs

I'm using the nivo-slider and im trying to make thumbnails but I cant get it to work.
Here is what I have:
Nino Slider Demo
Here is the tutorial on how to, but i cant get it to work.
Nive Slider Website
I hope some one can see what i do wrong

I have found that the theme 'default.css' conflicts with the img styling (as noted in their tutorial). You need to comment out the css styles in default.css for the following classes:
.theme-default .nivoSlider img
.theme-default .nivoSlider a
.theme-default .nivo-controlNav
.theme-default .nivo-controlNav a
.theme-default .nivo-controlNav a.active
And, as noted in their tutorial, you need to add this styling:
#slider .nivo-controlNav {
position:absolute;
bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
}
I had trouble too with this, hope it helps someone.

I had lots of troubles finding where my thumbnails are as well. I finally found them by positionning them "absolute", and they finally appeared in the middle of the slideshow :)
But I don't really like the way they're displayed, so I made a quick fix which requires to edit the script a bit.
In jquery.nivo.slider.js, add this at the beginning of the file:
var thumbnails = $("#thumbnails"); // this is where your thumbnails will be
Then find this:
//Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
And replace with
//Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
thumbnails.append(nivoControl);
Find this:
$('.nivo-controlNav a', slider).live('click', function(){
Replace with:
$('.nivo-controlNav a', thumbnails).live('click', function(){
Then place a somewhre in your page, and you're done :)
Of course, lots of improvements can be done, but as I said it's a quick fix. That would be nice if next versions of Nivo slider had an option to place the thumbnails in a different location.
Hope this helped ;)

The Nivo site has a new demo that shows how the thumbnails work: http://nivo.dev7studios.com/demos/
The relevant example has the following CSS styling:
#slider3 {
margin-bottom:110px;
}
#slider3 .nivo-controlNav {
position:absolute;
left:185px;
bottom:-70px;
}
#slider3 .nivo-controlNav a {
display:inline;
}
#slider3 .nivo-controlNav img {
display:inline;
position:relative;
margin-right:10px;
-moz-box-shadow:0px 0px 5px #333;
-webkit-box-shadow:0px 0px 5px #333;
box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
border:1px solid #000;
}
Note how both the a and the img tag in the .nivo-controlNav class use display: inline, that is key to making it work.
The other properties are for positioning the nav bar and adding drop shadows.

I had a great deal of difficulty getting image thumbnails to work properly myself. This worked for me. Full details at my blog entry.
Add this CSS styling as the last to load (include it in a LINK beneath the other core Nivo CSS sheets)
.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}
#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}
#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our images in the slider */
}
And don't forget to set these parameters when you call Nivo:
$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});

Fade background image in and out with jQuery?

So far, I've tried a bunch of things to the effect of the following, without success:
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
Any ideas?

You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.
Here's a quick example of images fading one after the other.
HTML
<img src=".." />
<img src=".." />
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
Check working example at http://jsfiddle.net/RyGKV/

You can fade backgound-images!
in and out!
jQuery:
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
Edit:
This will fade the whole div not onley the background-image.

Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...
Here's an example

I got here because I was looking for a solution to fading background images based on a <select> option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.
This initially stacks two identical images on top of each other. When the <select> is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none" which needs to be removed at the beginning of the operation, otherwise it doesn't work.)
Hope this is useful to someone else and not too irrelevant to be included here!

Here a demo to fade background-image by using the opacity and transition CSS properties with javascript/jQuery:
$( document ).ready(function() {
$( "#textarea" ).focusin(function(){
$( "#blur" ).css({
"opacity" : "1.0",
"transition" : "opacity 600ms ease-in-out"
});
}).focusout(function(){
$( "#blur" ).css({
"opacity" : "0",
"transition" : "opacity 600ms ease-in-out"
});
});
});
body {
background-size: cover;
background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg");
}
#textarea {
width: 50%;
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5");
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="textarea" type="text" placeholder="Focus here to trigger the transition...">
<div id="blur"></div>