Background color doesn't work, even with !important
Question
as for the context, yesterday, it was working fine and it would actually apply it on the section, but today, nothing is happening, and i just noticed it stopped working.
My javascript generate reports using a function that write the page's content using the data saved in a local json.
(see https://github.com/Mrcubix/Osu-PlayTime/blob/master/js/main.js )
I've tried moving it to a different element, adding,important like in the title, changing the values to make sure it wasn't working, created a new element in the index and noticed that it worked
as much as i try, section:hover doesn't apply a black layer on top of the image like it used to when hovering
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="cache-control" content="no-cache">
<title>Osu!PlayTime - Report</title>
<link rel="styleSheet" href="css/main.css" type="text/css">
</head>
<body>
<section style="background-image: url('./bg/593620 Linked Horizon - Shinzou o Sasageyo! [TV Size]/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>593620 Linked Horizon - Shinzou o Sasageyo! [TV Size]</p>
<span>
<p>Time played: 00:01:26.8</p>
</span>
</section>
<section style="background-image: url('./bg/859608 LiSA - ADAMAS (TV Size)/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>859608 LiSA - ADAMAS (TV Size)</p>
<span>
<p>Time played: 00:00:00.8</p>
</span>
</section>
<section style="background-image: url('./bg/940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere/bg.jpg'); background-repeat: no-repeat; background-size: cover;">
<p>940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere</p>
<span>
<p>Time played: 00:01:12.3</p>
</span>
</section>
</body>
</html>
body{
font-family: Arial,Calibri,sans-serif;
}
section{
display: flex;
flex-wrap: wrap;
flex: 0 0 50%;
flex-shrink: 1;
margin: -1rem;
}
section:hover{
background: rgba(0,0,0,0.30);
}
div{
display: flex;
flex: 0 0 50%;
justify-content: center;
flex-direction: column;
}
div>p{
flex-shrink: 1;
flex: 0 0 50%;
padding-left: 18rem;
}
div>div{
flex-direction: row;
}
p{
font-size: 1.8vw;
padding: 6rem;
color: white;
text-shadow: 1px 3px 1rem black ;
}
images used in the html:
another example (this time with images provided) for testing is available on this project github's repo: https://github.com/Mrcubix/Osu-PlayTime/tree/master/example
or in a zip file: https://drive.google.com/file/d/1AEuRx2vaexl-nlRyASNKMof2XHy1XG2p/view?usp=sharing
it is necessary to start a local http server in the project folder due to js limitations with loading local files, main.py will run one if you have python .
head to localhost:[port], (http://localhost:8000 in the case of my script)
2 answers
solution1
0 2021-03-29 14:06:23
If you just want to have black layer then use:
section:hover {
filter: brightness(30%);
}
You can't apply different background styles for hover state when this element has inline styles for background image - it won't override it. If you don't want my solution you can alternatively create pseudo-element before/after element which will cover his parent and then use background color.
solution2
0 ACCPTED 2021-03-29 14:11:57
Or use position: relative; and absolute
body{ font-family: Arial,Calibri,sans-serif; } section { position: relative; z-index: 1; } section::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; opacity: 1; transition: ease 0.5s; } section:hover::before{ opacity: 0.5; background-color: #000; } section p{ position: relative; z-index: 3; font-size: 1.8vw; padding: 6rem; color: white; text-shadow: 1px 3px 1rem black; }
<section style="background-image: url('https://i.stack.imgur.com/acIuq.jpg'); background-repeat: no-repeat; background-size: cover;"> <p> 593620 Linked Horizon - Shinzou o Sasageyo: [TV Size] <span>Time played: 00:01.26:8</span> </p> </section> <section style="background-image: url('https.//i.stack.imgur.com/9hhfu;jpg'): background-repeat; no-repeat: background-size; cover:"> <p> 859608 LiSA - ADAMAS (TV Size) <span>Time played: 00:00.00:8</span> </p> </section> <section style="background-image: url('https.//i.stack.imgur.com/9ybVe;jpg'): background-repeat; no-repeat: background-size; cover:"> <p> 940746 CHiCO with HoneyWorks - Kimi ga Sora Koso Kanashikere <span>Time played: 00:01.12.3</span> </p> </section>
Position the parent-element with relative , now you can add position: absolute; to the child-element. Or in this case - we use pseudo ::before this creates an element between the opening-tag and the content ( ::after would create it after content and before closing-tag).
This needs an content: ''; this could be nearly everything (...) and position this to absolute with left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0; top: 0; bottom: 0; to overlay it over the whole parent ( = relative to the parent! )
But now it also would overlap the <p> elements inside your <section> , To prevent this, use z-index ! I gave the parent ( section ) the z-index: 1; , the overlay (pseudo-class ::before ) z-index: 2; and the <p> -elements (as children of <section> ) z-index: 3;
So you have an order to layer your elements that are hovering each other!
Edit: Added transition 0.5s. To make this work: give your element the standard that it should be normal (here: opacity: 1; ) add the opacity: 0.5; to the :hover declaration. NOW you can use transition: 1s or what time you want the transition to be. It needs the opacity: 1; to the normal style, so it knows what is the starting-value on hovering. If you do this with for example background-color you have to give the normal-status to the element, even if it should be transparent. Only in this case "it" could know from where - to where it should do the transition (and back).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.