I've read some code and I saw this background-color: transparent.
I don't know what it is, so I searched the internet, but I couldn't find a resource to explain what it means.
What does background-color: transparent mean and/or do?
As the name suggests, background-color: transparent means you can see through the background of the element, i.e. its background color would appear to be identical to the background color seen on its parent element.
Note that this is different from background-color: white, because if the parent element has a background color other than white, given element will have a different color, i.e. white.
Also keep in mind that it is the initial value of background-color property. Meaning, if you do not explicitly specify the background-color, it will take the value transparent.
Here's an example to give you an idea:
.container {
width: 200px;
border: 1px solid black;
}
.container > div {
width: 150px;
margin: 25px;
border: 1px solid black;
height: 50px;
}
.bg-blue {
background-color: aqua;
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
background-color: white;
}
.bg-yellow {
background-color: yellow;
}
<div class="container bg-blue">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
<div class="container bg-white">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
<div class="container bg-yellow">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
If you use background-color:transparent it means, that you don't want to have a background-color for this element. A typical usecase would be: if you are overlapping another element and want to see the underlying element with it's content or color.
Background is used to make the color transparent. Also remember that you can use it in "color", "border" etc.
color:transparent;
border-color:transparent;
background-color:transparent;
Related
I've uploaded a 40x40 square .png.
The square has a white transparent background.
What I would expect when using this image as a custom cursor is that hovering over the red block I would see a faint white transparent square.
What I would expect when hovering over the white block is nothing, as I would assume the square should be "invisible" due to transparent white going over white.
But that's not what we are seeing, the square is actually faintly grey. Where does this conversion come from? I've tried using SVG as well as png.
FIDDLE in case example is not working
https://jsfiddle.net/cx2gu5qb/
.block {
height: 200px;
width: 400px;
cursor: url('https://i.imgur.com/yuDNHeN.png'), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="block red"></div>
<div class="block white"></div>
The picture you were using in your code as the cursor value url("https://i.imgur.com/yuDNHeN.png") seemed to have a transparent background when opened inside a picture editor but that color was actually: HSV(0,0,100) alpha(128) and as such it's a white with an alpha channel that will blend with the background color below the picture.
So both on red and white colors it showed up as gray.
Well...on red I would expect that color to blend to gray but as you pointed out, on white it shouldn't.
So actually I'm not strictly answering your direct issue but I'm just bringing further evidence to the table that it probably depends on how the browser deal with it when computing the color interpolation.
I made a bunch of attempts using a different image for the cursor and implemented a code snippet where pressing the corresponding button will engage the given class name for each .block element that will set a different value for the cursor property. It includes your original cursor attempt and also a final try using a green transparent background instead of white.
Conclusion so far: not really a very conclusive answer that can explain correctly and in a definitive way how blending works.
First attempt - using a total transparent color
So I attempted to make a new picture from scratch having a transparent background and an opaque red frame for reference.
https://i.ibb.co/WgSYYNW/cursor2.png
As you can see when the cursor shows on the red box, it will look invisible and when you'll hover on the white box, the red frame will be visible.
This comparison is to show how to achieve the real transparency.
Second attempt - using a partially transparent color
Here I tried to use the same picture as before but using a white color with alpha: 130.
https://i.ibb.co/Pg1b6Z1/cursor3.png
And it behaves in the same exact way as your original post did while we expected the translucent white to blend as white over white.
function changeCursor(button){
document.querySelectorAll('.block').forEach(block => {
block.classList.forEach(c => {
if(c.startsWith('cursor'))
block.classList.remove(c);
});
const classname = button.dataset.classname;
block.classList.add(classname);
document.getElementById('status').innerText = `cursor class engaged: ${classname}`;
});
}
button{
display: block;
margin-bottom: .5rem;
cursor: pointer;
padding: .5rem;
}
#status{
border: solid 2px gray;
padding: 1em;
display: block;
width: fit-content;
}
.block {
height: 200px;
width: 400px;
}
.container{
margin: 1rem;
}
/*white alpha 128*/
.cursor1{
cursor: url("https://i.imgur.com/yuDNHeN.png"), auto;
}
/*white alpha 255*/
.cursor2{
cursor: url("https://i.ibb.co/WgSYYNW/cursor2.png"), auto;
}
/*white alpha 130*/
.cursor3{
cursor: url(https://i.ibb.co/Pg1b6Z1/cursor3.png), auto;
}
/*green alpha 75*/
.cursor4{
cursor: url(https://i.ibb.co/w0JYvM1/cursor4.png), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="container">
<button onclick="changeCursor(this);" data-classname="cursor1">Cursor: white alpha 128</button>
<button onclick="changeCursor(this);" data-classname="cursor2">Cursor: white alpha 255 w/ frame</button>
<button onclick="changeCursor(this);" data-classname="cursor3">Cursor: white alpha 130 w/ frame</button>
<button onclick="changeCursor(this);" data-classname="cursor4">Cursor: green alpha 128 w/ frame</button>
<div id="status"></div>
</div>
<div class="block red"></div>
<div class="block white"></div>
cursor: url('https://i.imgur.com/V8pXcSn.png'), auto;
Your are getting a different color because of the shadow.
I've checked this with popular browsers. The result was exactly the same one.
Check the below image
https://jsfiddle.net/j1wnxzgu/2/
Conclusion
The shadow uses drop shadow algorithm.
As in, the shadow's alpha is proportional to the images alpha channel.
With CSS, we can't change this behavior
Go for JavaScript solutions
If you will make your cursor full white, only then are you going to see the desired result. Like this: fiddle
.block {
height: 100px;
width: 200px;
cursor: url('https://i.imgur.com/V8pXcSn.png'), auto;
}
.red {
background: red;
}
.white {
border: 1px solid black;
background: white;
}
<div class="block red"></div>
<div class="block white"></div>
But if you try to make it transparent, your white color becomes something like #ffffff80 resulting in the greyish color.
I followed the instructions I found online when using :target, but it's not working. When the first link is clicked, I want the background color and font color of #div1 to change. When the second link is clicked, I want the border of #div2 to change. But nothing changes when I click either of the links.
What am I doing wrong?
a.div1:target {
background-color: blue;
color: yellow;
}
a.div2:target {
border: 10px dotted green;
}
div {
width: 300px;
border: 1px solid;
padding: 50px;
margin: 20px;
}
First Link
Second Link
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
:target matches the element that is linked to, not the link itself.
div#div1:target {
background-color: blue;
}
Okay so i want to make a transparent button with some icon / text inside that, on hover, makes the text transparent and the background colored. This is "kinda" my code:
.button-color {
padding: 12px 20px;
border: none;
color: red;
background-color: transparent;
}
.button-color:hover {
color: transparent;
background-color: red;
}
<button class="button-color">Hi!</button>
(The code is way longer but you get the point)
And this is the result:
Unhovered:
Hovered:
I want the background to get transparent where the icon is. Oh and setting the icon to a certain color won't do the trick because these buttons are inside a 3D viewer that has a model loaded . I don't even know if this is achievable with pure css but who knows.
You can get this effect using blend-mode : hard-light as long as the color of the element has RGB values that are 0 or 255. (that is, primary colors).
With this blend-mode, gray (RGB values of 128) is "transparent"
.button-color {
padding: 12px 20px;
border: none;
font-size: 100px;
color: red;
background-color: gray;
mix-blend-mode: hard-light;
left: 10px;
top: 10px;
width: 200px;
}
.button-color:hover {
color: gray;
background-color: red;
}
.container {
background-color: lightgreen;
width: 200px;
}
<div class="container">
<button class="button-color">Hi!</button>
</div>
I have the following background image that is half gray, and half white.
When elements such as buttons, or text are on the dark side of the background, they appear behind it.
When elements are on the light side it appears in front of the background.
How can I get elements to appear in front of the dark side of the background?
Here is the button code, located outside of the body tag (which my background is located in)
<div class="container">
<div class="row">
<div class="col-xs-12" align="center">
Go
</div>
</div>
</div>
Here is the CSS for the button.
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1000;
}
Here is the code for my background:
.background-picture {
background-image: url("../img/background.png");
background-size: cover;
z-index:1;
}
If you look very closely, you can see that the button actually is above the black part as well. (Depending on the quality of your screen and its calibration, you might actually not be able to see it, but I clearly do.)
The reason is that you have a transparent background color defined (a 60% transparent black) - that's why the "black" button appears grey-ish in front of the white background, but nearly invisible in front of the very dark background.
Simply change it to be an opaque grey, and you're done.
.btn-dark {
/* background-color: rgba(0,0,0,0.4); */
/* about the same color: */
background-color: #999;
}
Also, you definitely should change the font color of the buttons for the dark background to white or a very light grey.
main{position:relative;display:inline-block;border:1px solid red;}main > div{width:200px;height:150px; display:inline-block;}.white{background:#fff;}.black{ background:#000;}button{position:absolute;left:calc(50% - 50px);width:100px;border:none;color:#fff;border:1px solid #ccc;}
#one{
background:#999;
top:10px;
}
#two{
background:rgba(0,0,0,.4);
top:60px;
}
<main>
<div class="white"></div><div class="black"></div>
<button id="two">
Test with rgba color!
</button>
<button id="one">
Test with opaque color!
</button>
</main>
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1001;
}
more the z-index is higer more the button is hover try this code
used background-color: rgba(0,0,0,0.4) for button and make the background black in cause the button will be black and not appear
you can add border or use different background color like gray red ..etc
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(30,30,30,0.4);
border:none;
z-index:10000;
border:1px solid gray;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 300px !important;
height:30px;
display:block
}
<div class="container">
<div class="row">
<div class="col-xs-12" align="center" style="background:black">
Go
</div>
<br>
<div class="col-xs-12" align="center" style="background:white">
Go
</div>
</div>
</div>
It is not appearing behind the image, it is on the image only, your colour combination is such that you are seeing the buttons like that. However, if you check the same image uploaded by in some other system with maximum brightness you will see what I'm saying over here. I think if you can just change your colour combination everything will be fine.
I have div that has a hover effect attached to it. This div contains 2 other divs with text, with styled text color.
<div class="item">
<div class="top">
test
</div>
<div class="bottom red">
test red
</div>
</div>
and css:
.item {
width: 480px;
height: 970px;
background: #cccccc;
font-size: 60px;
color:#0073b5;
text-align: center;
}
.red {
color:#ff2400;
}
.item:hover {
background: blue;
color: #ffffff;
}
.top {
height: 466px;
}
.bottom {
padding-top: 85px;
text-align: center;
}
When I hover over any part of the item div, I need all the texts in nested divs to change the color to white.
Currently only text in top changes its color, however text in bottom red doesn't.
I've tried different combinations but the best I've got is to change bottom red color to white only when mouse over that div and not when mouseover over other parts of item.
Please help!
.red will explicitly override the color. Make your selector stronger, eg:
.item:hover > * {
color: #ffffff;
}
// Other examples
.item:hover > div
.item:hover *
// Or explicitly declare .red too
.item:hover,
.item:hover .red
// As worst solution, you have !important
.item:hover {
background: blue;
color: #ffffff !important;
}
In CSS the most specific rule wins. Try adding the following rule to your CSS.
.item:hover .red {
color: white;
}