html - 在 CSS 中使用渐变时，如何保持与向下滚动相同的背景？

Question

我喜欢加上CSS3 gradients的效果我将它作为背景色应用到我的应用程序中。我的应用程序显示事件列表，列表的长度取决于数据。

我的问题是我无法用一种渐变效果覆盖整个背景。当我向下滚动时，一个渐变结束，新渐变开始。图片如下。

我认为 height:100px 可以，但没有。

我该怎么办？我使用 React 和 SCSS。

搜索.js

export default class Search extends Component {
   constructor(props){
    super(props);
    this.state = {
      data : ""
    }
    this.handleEvent = this.handleEvent.bind(this);
   }

   handleEvent(e){
    const start = document.getElementById("startDate").value;
    const end = document.getElementById("endDate").value;
    const city = document.getElementById("cityName").value;

    // get current time for the format valid format YYYY-MM-DDTHH:mm:ssZ {example: 2020-08-01T14:00:00Z}
   var getTime = new Date();
   var time = "T" + ("0" + getTime.getHours()).slice(-2)+ ":" + ("0" + getTime.getMinutes()).slice(-2) + ":" + 
("0" + getTime.getSeconds()).slice(-2) + "Z";
   const url = `${baseUrl}&startDateTime=${start}${time}&endDateTime=${end}${time}&city=${city}${API_KEY}`
   console.log(url)

   axios.get(url)
      .then(response => {
      console.log(response)
      console.log(response.data._embedded)
      this.setState({
        data: response.data._embedded
      })
      })
      .catch(error => {
        alert("error! Try again")
      })
   }
render(){
    let data = this.state.data.events;
    let events;
    if(data) {
     events = data.map(
        (obj) =>(
            <div className="result">
            <a href={obj.url}>
            <img src={obj.images[0].url} alt="img" height="300" width="300"/>
            <div key={obj.id}>{obj.name}</div></a>
            </div>
            )
            )
        }
    console.log(events)
    return(
        <div>
        <h1>Search Event</h1>
        <div className="form">
            <label for="startDate">From</label>
            <input type="date" id="startDate"/>
            <label for="endDate">To</label>
            <input type="date" id="endDate"/>
            <label for="cityName">City</label>
            <input type="text" id="cityName" />
            <button type="submit" onClick={this.handleEvent}>Search</button>
        </div>

        <div className="wrapper">
        {events}
        </div>
        </div>
        )
}
}

搜索.scss

/** General **/
html {
 height: 100%;
 display: block;
 background: $lightBlue;
 background: -webkit-linear-gradient($lightBlue, $blue); 
 background: -o-linear-gradient($lightBlue, $blue); 
 background: -moz-linear-gradient($lightBlue, $blue); 
 background: linear-gradient($lightBlue, $blue); 
 }

a {
 text-decoration: none;
 color: $pink;
}

a:hover {
 color: $darkPink;
}

Answer 1

My problem is that I cannot cover whole background with one gradient effect. As I scroll down, the end of one gradient comes and the new gradient starts.

你必须利用:

 background-repeat: no-repeat;
background-attachment: fixed;

这是 JSfiddle