How can I change the color of the thumbnail side bar from white to black?
This can be done using CSS, for example:
.fancybox-thumbs {
background: rgba(0, 0, 0, 0.3);
}
Demo - https://codepen.io/anon/pen/POgEMb
Related
How do I apply the css property background inline in react?
I tried passing the following object, which didn't work:
let style = {
background:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }") no-repeat center center cover`
};
Note: it does work when only adding the url property.
The reason why I want this is because I need to add a linear-gradient as well, aside from a dynamic background-url.
If I define it via a css class rule, it is being overwritten by the inline-style.
Edit: I really don't understand why to close this question because off topic. If a css label is needed, just say so in the comments (?).
A , in the background shorthand rule separates 2 backgrounds, not just 2 background-images.
So if you need 1 shorthand rule that overrides all of the properties:
background:
`linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) no-repeat center center / cover,
url("${ place.imgUri }") no-repeat center center / cover`
With the help of Gabriele Petrioli, it worked.
I just added:
let style = {
backgroundImage:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }")`
};
Then just added css class properties additionally:
background-size: cover;
background-position: center;
background-repeat: no-repeat;
The are a couple of issues with the original code.
First, because linear-gradient refers to the background-image property so you actually need two backgrounds, you need to use , to separate them.
Secondly, the syntax for background-size in the shorthand version is after /.
So it should be
let style = {
background:
`linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
), url("${ place.imgUri }") no-repeat center center / cover`
};
I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.
Using CSS3, what RGB-like value should replace VALUE below in order to achieve a solid black background that is 95% transparent?
div { background: VALUE }
Thanks Folks!!!
RGBa (a for alpha)
div { background: rgba(0, 0, 0, .05)};
You can use an RGBA notation.
R for red, G for Green, B for Blue and the A for aplha (percentage of transparency, as you've asked).
So the best answer is :
div {
background : rgba(0, 0, 0, .95);
}
And don't worry, it's supported by all the major browsers (even IE since IE 9) : http://caniuse.com/css3-colors
RGBa, i think:
div {
background:rgba(0, 0, 0, 0.95);
}
Folks i took a challenge test online and the following is the answers they provided to my question above:
div { background:rgba(0, 0, 0, 0.05); }
To check, I ran a test on my system and #Blingue is definitely correct.
Use div {background:rgba(0,0,0,0.05)}
If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
I have a button with a transparent bg. On hover it changes to some color.
And a transition is set to smooth it out. Lets say the page visible behind it is red (anything other than white).
background-color: rgba(0, 0, 0, 0)
transition: background-color 0.5s
&:hover: {
background-color: rgba(0, 0, 0, 0.7)
}
Problem: on page load, or more precisely element load (using React), the button will go from white to transparent.
How to fix?