Question

我正在尝试创建三个单独的部分，每个部分的背景图像都不同。我试图创建一个不透明层，将覆盖所有三个图像。我的网页内容将位于覆盖三个图像的不透明层的顶部。

我尝试在图像div中使用子div，尝试在两个div中添加特定的代码，但它们都不符合我的要求。

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    width: 100%;
    font-size: 18px;
    font-family: sans-serif;
    color: #5D6063;
  } 
  /* ------The following code affects specifically the header and the navigation bar ------ */
  .header {
    position: fixed;
    display: flex;
    justify-content: space-between;
  
    width: 100%;
    padding: 50px;
    background-image: url('https://www.laneterralever.com/wp-content/uploads/2018/08/codecode.jpg');
    background-repeat: no-repeat;
    background-color: #D6E9FE;
    background-size: cover;
    color: white;
    }
  .menu {
    margin-top: 15px;
  }
  /* Li elements are naturally block level elements and you need to change their display type to inline elements */
  .menu > li {
    display: inline;
    margin-right: 50px;
    font-weight: 700;
    color: red;
  }
  a:link,
a:visited,
a:active {
  color: red;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  background-color: white;
}
/* ------ This ends the block of code for the header/nagivation menu ------ */
/* ------ The following code affects the background of the site, behind the opaque layer that will occur later on ------ */
.full-width {
    height: 1900px;
    background-color: black;
}
.full-width {
    z-index: 0;
}
.full-width > img {
    margin: -3px;
    z-index: 0;
}
/* ------ This ends the code for the background images behind the opaque layer ----- */
.content {
    width: 80%;
    background-color: white;
    z-index: 1;
    height: 1800px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Welcome to ByPedersen.com</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bypedersen.css" rel="stylesheet">
    </head>
    <body>
        <!-- The following code is for the header/navigaiton menu at the top of hte page -->
    <header class='header'>
        <h1>Welcome to ByPedersen.com!</h1>
        <nav class='nav-menu'> 
            <ul class='menu'>
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Intro to ByPedersen</a></li>
                <li><a href='#'>Websites</a></li>
                <li><a href='#'>Contact Me/Services Offered</a></li>
            </ul>
        </nav>
    </header>
    <!-- This ends the block of code for the header/navigation menu-->
    <!-- From here down is the code for the rest of the body of the website-->
    <div class = 'full-width content'> <!-- Full width of the page, 3 seperate background images then a color-->
        <img src='fancy-building.jpg' alt='Photo by Marc-Olivier Jodoin on Unsplash' class='bgi-1 no-margin' height='600px' width='100%'/>
        <img src='roman-hall.jpg' alt='Photo by Samuel Zeller on Unsplash' class='bgi-2 no-margin' height='600px' width='100%'/>
        <img src='orange-lines.jpg' alt='Photo by Rene Böhmer on Unsplash' class='bgi-3 no-margin' height='600px' width='100%'/>
        <!--The above images are the background images behind the opaque layer-->
        <div class = '1content'><!-- This is where the actual site content will be located. There will be an opaque cover over the background image so only the sides of the image is visible.-->

        </div>
    </div>
    </body>
</html>

Answer 1

您是否尝试过在full-width类上添加不透明度属性？您的CSS看起来像这样：

full-width {
  opacity: 0.5;
}

这里有一些额外的资源：https://www.w3schools.com/cssref/css3_pr_opacity.asp

然后，您可以将内容移到具有不透明度的div之外。

如何在背景图像上设置不透明层

1 个答案: