当前位置: 首页 > 工具软件 > React Style > 使用案例 >

React 通过style来设置背景图片。

曾枫
2023-12-01

React 中,给元素设置样式主要有两种,

一,引入CSS文件

这种不用多说,通过 import 

import '../views/css/bases.css';

这种方式适合,样式比较复杂,多的情况 。

二,设置元素的 style

<main type="lock" style={{ color: 'rgba(0,0,0,.25)' }}> </main>

也可以些成如下方式,设置背景图片  `url(${imgBg})

import Background from '../images/bg.png';
const style ={
    bgd:{
        color: 'rgba(0,0,0,.25)'
        backgroundImage: `url(${imgBg})`,
        backgroundSize: '100%,100%',
    }
}
class ShowDemo {
    render(){
        return(
            <div style={style.bgd}>我有一个背景图片</div>
        )
    }
}

第二种,方式我是使用在小组件里面,样式内容比较少,没有写成css文件引入。

 类似资料: