Question

我想添加CSS3 gradients的效果，并将其应用于我的应用程序作为背景颜色。我的应用程序显示了一个事件列表，列表的长度取决于数据。

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

我认为height:100px会起作用，但它没有。

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

Search.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>
        )
}
}

Search.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

我的问题是我无法用一个渐变覆盖整个背景影响。当我向下滚动时，一个渐变的结束和新的渐变渐变开始。

你必须使用：

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

以下是JSfiddle

Answer 2

尝试稍微重构您的SCSS。将背景样式应用于.unmarshal(bindy).split(body()).process(exchange -> { Order order = exchange.getIn().getBody(Order.class); order.setFooter((OrderFooter)exchange.getIn().getHeader(BindyFixedLengthDataFormat.CAMEL_BINDY_FIXED_LENGTH_FOOTER,Map.class).get(OrderFooter.class.getName())); order.setHeader((OrderHeader)exchange.getIn().getHeader(BindyFixedLengthDataFormat.CAMEL_BINDY_FIXED_LENGTH_HEADER,Map.class).get(OrderHeader.class.getName())); });标记。

设置<body>以停止渐变重复，并设置background-repeat: no-repeat;以防止背景滚动。

background-attachment: fixed;

在CSS中使用渐变时，如何向下滚动显示相同的背景？

2 个答案: