react.js如何设置页⾯div背景图⽚
1. 如何在react js 项⽬中设置div 背景图⽚
在传统的项⽬中我们只需要在css⽂件中定义样式,然后给div添加相应的class即可,
但是在react.js中,尤其是在⽤webpack 搭建的环境中,似乎直接写定义class样式就
不太管⽤了,因为这样的react项⽬,定义class属性需要⽤驼峰className={Obj(⼀个对象)},
⽽定义标签上的样式则⽤ style={(⼀个对象)},的形式。
2.那么我们该如何给⼀个div添加背景图⽚呢?
如下:
//⾸先引⼊需要的图⽚路径
import Background from'../../../images/login.jpg';
//定义背景样式
var sectionStyle = {
width: "100%",
height: "400px",
// makesure here is String确保这⾥是⼀个字符串,以下是es6写法
backgroundImage: `url(${Background})`
};
export default class Login extends Component{
//渲染页⾯
render(){
return (javascript登录注册界面
<div style={sectionStyle}></div>
)
}
}
3.代码截图
-----------结尾的分割线--------------------------------
4,如果您觉得我的⽂章对您有所帮助,欢迎打赏-----------谢谢-------