Question

我有一个页面，其背景图片在滚动时效果很好，但我还想添加一个半透明的叠加层。

我试图通过将背景包装在span容器中来完成此操作。问题在于它是用户可以添加的页面，当用户需要滚动的内容足够时，透明背景仅覆盖第一页。

我尝试过背景附件：修复;背景尺寸：封面;但它们都不起作用。

您会看到重叠停靠的位置in this screenshot

相关CSS：

body {

background-image: url(images/ocoast.jpg);
 background-size: cover;
}
.totalqs {

background-color:rgba(0,0,0,0.3);
color: white;
text-align: center;
float: left;
height: 100%;
width: 100%;
}

PHP页面，test.php

<html>
<head><title>All Questions</title><link rel="stylesheet" type="text/css" href="style2.css">
</head>

<span class ="totalqs"><body>
      <center><div class="navbar"><a href= 'ask.php'>Ask a Question</a>
      &nbsp;
        <a href='test.php'>Answer a Question</a>
        &nbsp;

       <a href= 'search.html'>Search</a>
       &nbsp;

       <a href= 'yourqs.php'>Your Questions</a>
       &nbsp;
       <a href= 'index.html'>Log out</a>

    <hr><hr></center>
    <br />    <br /><br /><br /><br /><br />

    <h1><u>Every Question Ever Asked</u></h1>      

    <p><u><b>Hello <?php echo $username; ?> Answer Another Users Question: </u></b><br><br /></p>

    <?php  
    /* 
    Get the questions from the database here and display them - 
    removed from question because its not relevant to the problem
    */
    ?>

    <br /><br />

    </body></span>
</html>

如何让叠加层填满整个背景？

Answer 1

我现在看到你遇到的问题是使用透明覆盖的元素来填充屏幕。

您可以通过使用渐变Ref: CSS Tricks伪装来在主体元素本身上添加透明叠加层，而不是使用单独的元素，例如

body { background: /* top: transparent grey, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), /* bottom: image */ url(images/ocoast.jpg) no-repeat; background-size: cover; }

这完全取消了对单独元素的需求。您可以直接在身体上应用其他样式（例如color: white），也可以根据需要创建<div class="container">元素（在<body>内！）。

工作代码 - 我将叠加设为绿色，因此显然它覆盖了整个区域）：

＆＃13;
＆＃13;
body { /* BACKGROUND */ background: /* top: transparent colour, faked with gradient */ linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */ url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top; background-size: cover; /* CONTENT */ color: white; text-align: center; } /* for testing only: add big vertical margin to make page scroll */ p { margin: 100px 0; }
＆＃13;
<body class="backimg"> <div class="navbar"><a href='ask.php'>Ask a Question</a>   <a href='test.php'>Answer a Question</a>   <a href='search.html'>Search</a>   <a href='yourqs.php'>Your Questions</a>   <a href='index.html'>Log out</a> </div> <hr><hr> TESTTESTTESTTEST TESTTESTTESTTEST </body>
＆＃13;
＆＃13;
＆＃13;

注意：仅供参考您的HTML无效 - 您无法在<body>标记之外添加任何元素。此外，<center>已弃用，但不会导致问题，但您仍应更改此问题 - 请改用text-align: center样式。

<强>更新

仅将叠加层添加到特定页面，或者每页都有不同的颜色

如果要为特定页面添加叠加层，可以使用相同的方式执行此操作，但使用类。如果你愿意，你也可以这样做为不同的页面添加不同的颜色！

将CSS添加到类而不是<body>元素

在HTML中，将一个类添加到body元素

然后将相应的类添加到每个页面的<body>！例如：

<强> 1。 CSS

为您要使用的每个不同背景创建CSS类：

/* This will only contain the CSS that applies to all pages, e.g. */ body{text-align: center;} /* Set up the different classes you will use, e.g. these are for green and blue overlays: */ body.greenoverlay{ background: /* top: transparent colour, faked with gradient */ linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */ url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top; background-size: cover; color: white; } body.blueoverlay{ background: /* top: transparent colour, faked with gradient */ linear-gradient( rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.3)), /* bottom: image */ url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top; background-size: cover; color: white; }

<强> 2。 HTML

将正确的类添加到每个页面的正文中，例如：

无叠加：<body>

绿色叠加：<body class="green-overlay">

蓝色叠加：<body class="blue-overlay">

仅供参考，因为我们使用linear-gradient伪造纯色背景色，您可以创建各种渐变和色彩效果。运行此代码段以查看我的意思（我不建议您使用它！但它显示了您可以执行的操作）：

＆＃13;
＆＃13;
body.rainbowoverlay { background: /* top: transparent colour, faked with gradient */ linear-gradient(to right, rgba(255, 50, 50, 0.5) 0%, rgba(255, 50, 50, 0.5) 1%, rgba(255, 248, 50, 0.5) 35%, rgba(71, 255, 50, 0.5) 56%, rgba(137, 163, 255, 0.5) 79%, rgba(237, 137, 255, 0.5) 100%), /* bottom: image */ url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top; background-size: cover; color: white; }
＆＃13;
<body class="rainbowoverlay"> zzzzzzzz zzzzzzzz </body>
＆＃13;
＆＃13;
＆＃13;

您可以使用此渐变生成器为CSS中的linear-gradient生成CSS： http://colorzilla.com/gradient-editor/#ff3232+1,fff832+35,47ff32+56,89a3ff+79,ed89ff+100&0.5+0,0.5

添加向下滚动时固定的背景叠加（在背景图像上）

1 个答案: