I've encountered an issue with my CSS sheet that is causing one of my webpages to match the opacity of the background image, while the others do not exhibit this behavior. I specifically want only the background to have the opacity and not affect the rest of the content. After experimenting with the code, it seems like the problem only occurs on this particular page because it contains a table, whereas the other pages either have a form or no special elements. Should I provide some snippets of the HTML for further clarity? The problematic CSS code snippet looks like this:
div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}
In addition, here is some added HTML code:
<html>
<head>
<meta charset="utf-8" />
<script>
function view() {
// JavaScript function for displaying content
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<!-- Page layout and structure -->
</body>
</html>
The current appearance of the affected webpage displays a similar opacity as the background throughout the content, which is undesired. I aim to achieve a layout similar to another page where only the background has the applied opacity. Refer to the provided images for comparison:https://i.sstatic.net/CXhlT.pnghttps://i.sstatic.net/ea7zg.png