首頁  >  文章  >  web前端  >  react怎麼加入背景圖片

react怎麼加入背景圖片

王林
王林原創
2020-11-27 09:23:158199瀏覽

react新增背景圖片的方法:首先引入我們需要的圖片路徑,如【import Background from '../../../images/xxx.jpg'】;然後定義背景樣式,如【width: "100%"】;最後渲染頁面即可。

react怎麼加入背景圖片

本文環境:

  • windows10、react16版本

  • Dell G3電腦

(學習影片分享:react影片教學

在react js 專案中設定div 背景圖片

#在傳統的專案中我們只需要在css檔案中定義樣式,然後為div添加對應的class即可,但是在react.js中,尤其是在用webpack 搭建的環境中,似乎直接寫定義class樣式就不太管用了,因為這樣的react項目,定義class屬性需要用駝峰className={Obj(一個物件)},而定義標籤上的樣式則用style={(一個物件)},的形式。

那我們該如何為一個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 (
    <div style={sectionStyle}></div>
        )

    }

}

程式碼截圖:

react怎麼加入背景圖片

react怎麼加入背景圖片

相關推薦:js教學

以上是react怎麼加入背景圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn