首先引入想要的图片,请看上面的目录
import homebackground from '../../assets/images/homebackground2x.png';
const homeImage = {
backgroundSize: '100% 100%', //记得这里100%
background: `url(${ homeImage })`,
//或者下面这种也行
backgroundImage: 'url(' + homebackground + ')'
}
哪儿需要就在哪儿引入此样式,比如
render(){
return (
<div className="home" style={ homeImage }>
<div className="home_running">
<div className="trade_price">
<Title title="今日交易流水(元)" style={{ width:'1.35rem',height: '0.22rem',color: '#fff'}}/>
<Price price={this.state.todayPrice} style={{fontSize: '0.45rem'}}/>
</div>
<div className="trade_account center" onClick={this.treadEvent.bind(this)}>
<Button style={{width: '1.31rem',height: '0.36rem',border: '1px solid #fff',color: '#fff'}} title="交易流水明细" />
</div>
<div className="date_price flex">
<DayPrice type="昨日" price={ this.state.yesterdayPrice} style={{borderRight: '1px solid #fff'}}/>
<DayPrice type="平均" price={ this.state.averagePrice} />
</div>
</div>
<div className="accout_message flex" style={{paddingTop:'20px'}}>
<Message
onClick={() => this.props.history.push('/billing_Report')}
src={ require('../../assets/images/account_report.png') }
content="账单报告"
style={{ borderRight: '1px solid #F0EFEF'}}
fontSize = {{ fontSize: '0.17rem'}}
/>
<Message
onClick={() => this.props.history.push('/news_Inform')}
src={ require('../../assets/images/news.png') }
content="消息通知"
fontSize = {{ fontSize: '0.17rem'}}
/>
</div>
</div>
)
}