添加向下滾動時固定的背景覆蓋（在背景圖片上）

Question

我有一個帶有背景圖片的頁面，該圖片在滾動時效果很好，但是我還想添加一個半透明的疊加層。

我試圖通過將背景包裝在span容器中來做到這一點。 問題在於這是用戶可以添加到的頁面，並且當用戶需要滾動足夠的內容時，透明背景僅覆蓋第一頁。

我嘗試過背景固定：固定； 背景尺寸：封面； 但它們都不起作用。

您可以在此屏幕截圖中看到疊加停止的位置

相關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>里面）。

工作片段 -我將疊加層設為綠色，因此很明顯它覆蓋了整個區域）：

 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; }

 <body class="backimg"> <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> </div> <hr><hr> <p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p> <p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p> </body>

注意：僅供參考，您的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來偽造純色背景色，所以您可以創建各種漸變和顏色效果。 運行此代碼片段以了解我的意思（我不建議您使用它！但是它顯示了您可以執行的操作）：

 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; }

 <body class="rainbowoverlay"> <p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p> <p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p> </body>

您可以使用此梯度生成器為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 個解決方案

解決方案1
0 已采納 2017-09-22 03:51:24

添加向下滾動時固定的背景覆蓋（在背景圖片上）

問題描述

1 個解決方案

解決方案1 0 已采納 2017-09-22 03:51:24

解決方案1
0 已采納 2017-09-22 03:51:24