使用CSS背景叠加

Question

我试图在我的身体顶部做背景覆盖，但是当我将位置设置为固定时，我的页面停止滚动，我无法在下面移动。当我删除固定定位时，覆盖层仅位于页面的某些部分，即如果我将高度设置为 100vh。当我滚动时，覆盖停止。

这就是 100vh 高度且没有固定定位时发生的情况。

如果我删除 height: 100vh 并使用固定定位，我将无法再滚动。

<html>
  <head>
    <title>Movie Lovers Survey Form</title>
    <meta charset= "utf-8"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
   <div> <h1 id="title">Movie Lovers Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve our platform</p>
    <form id="survey-form">
      <fieldset>
        <label for="name" id="name-label"> Name <input type="text" required id="name" name="name" placeholder="Enter your name"></input></label>
        <label for="email" id="email-label"> Email <input type="email" required id="email" name="email"  placeholder="Enter your email"></input></label>
        <label for="number" id="number-label"> Age <input type="number"  id="number" name="number" min="13" max="35"  placeholder="Age"></input></label>
        <label> What is your best movie Genre?  <select id="dropdown" required ><option value="0">Choose One</option>
          <option value="Comedy">Comedy</option>
        <option value="Action">Action</option>
        <option value="Romance">Romance</option>
        <option value="Horror">Horror</option>
        </select></label>
      </fieldset>
      <fieldset>
        <p>Which of these movie stars would you love to take a pic with?</p>
        <label> Jason Statham <input type="radio" id="Jason" value="Jason" name="hollywood"></input></label>
        <label> Ryan Reynolds <input type="radio" id="ryan" value="ryan" name="hollywood"></input></label>
        <label> Scarlett Johansson <input type="radio" id="scarlett" value="scarlett" name="hollywood"></input></label>

        <label> Which of these do you prefer?  <select id="dropdown" required ><option value="0">Choose One</option>
          <option value="Series">Series</option>
        <option value="Sitcom">Sitcom</option>
        <option value="Franchise">Franchise</option>
        </select></label>
      </fieldset>
      <fieldset>
        <p>Which of these movies have you watched? (Check all that apply)</p>
        <label> M3GAN <input type="checkbox"></input id="megan" value="megan"></label>
        <label> Hidden Strike <input type="checkbox" id="hidden" value="hidden"></input></label>
        <label> Barbie <input type="checkbox" id="barbie" value="barbie"></input></label>
         <label> The Little Mermaid <input type="checkbox" id="little" value="little"></input></label>
          <label> Oppenheimer <input type="checkbox" id="oppenheimer" value="oppenheimer"></input></label>

   <p>Which of these movie stars would you love to eat with?</p>
        <label> Tom Cruise <input type="radio" id="Tom" value="Tom" name="hollywood2"></input></label>
        <label> Zoe Saldana <input type="radio" id="Zoe" value="Zoe" name="hollywood2"></input></label>
        <label> Chris Evans <input type="radio" id="Chris" value="Chris" name="hollywood2"></input></label>

          <label><textarea rows="4" cols="30"></textarea></label>
      </fieldset>
      <input type="submit" id="submit"></input>
    </form>
    </div>
  </body>
</html>

CSS

body{
  background-image: url(https://www.movieloversmontana.com/wp-content/uploads/2020/04/Movie-Lovers-Logo-Square.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  color: white;
  width: 100%;
  height: 100vh;
  
}
div{
  background-color: rgb(80,80,80,0.8);
 height: 100vh
 /* position: fixed;
    top: 0;
    bottom: 0;
        left: 0;
    right: 0;*/
  


}

form{
  width: 60vh;
  margin: 0 auto;
}

h1, #description{
  color: white;
  text-align: center;
}
input{
  display: block;
}

Answer 1

不用担心，只需将此属性添加到CSS中的body标签中即可：

background-attachment: fixed;

应该可以。 :)

注意：不要使用position:fixed；等等

使用CSS背景叠加

问题描述投票：0回答：1

1个回答

最新问题

使用CSS背景叠加

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1