資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何在React內聯樣式中設定背景圖片？
在ReactJS中，我們可以使用CSS的‘backgroundImage’屬性來為元件或特定的HTML元素（如div）設定背景圖片。在這裡，我們將學習如何使用內聯樣式來設定背景圖片。
此外，我們將使用絕對和相對URL來設定背景圖片。
語法
使用者可以按照以下語法使用React內聯樣式來設定背景圖片。
<div Style = {{ backgroundImage: 'url("image-url")', }} > Div content </div>
在上面的語法中，我們使用了‘backgroundImage’ CSS屬性來為div元素設定背景圖片。
示例
我們在下面的示例中建立了div元素並應用了內聯CSS。我們使用URL設定了背景圖片。此外，我們還使用CSS設定了div元素的高度和寬度。此外，我們還為背景圖片設定了一些CSS屬性。
import React from "react";
export default function App() {
return (
<div>
<h2>
{" "}
Using the <i> React inline styles </i> to set a background image
</h2>
<br></br>
<div
class = "image"
style = {{
height: "350px",
width: "550px",
backgroundImage:
'url("https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/b2/1f/21/b21f21a8-e4f6-b7d2-1fec-8e5430273077/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/1200x630wa.png")',
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
}}
>
This div contains a background image.
</div>
</div>
);
}
輸出
示例
在下面的示例中，我們在函式元件的return語句之外建立了imageStyle物件。我們在imageStyle物件中添加了背景圖片。
之後，我們將imageStyle物件用作div的內聯樣式。在輸出中，使用者可以看到div元素的背景圖片。
import React from "react";
export default function App() {
let imageStyle = {
height: "350px",
width: "600px",
backgroundImage:
'url("https://img.freepik.com/free-photo/wide-angle-shot-singletree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg")',
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
color: "white",
};
return (
<div>
<h2>
{" "}
Using <i> React inline styles </i> to set a background image
</h2>
<br></br>
<div class = "image" style = {imageStyle}>
This div contains a background image.
</div>
</div>
);
}
輸出
示例
在下面的示例中，我們使用了相對URL來設定背景圖片。使用者可以將圖片新增到React應用程式的‘public’目錄中。之後，我們可以使用相對路徑，例如‘/image_name’，或者如果我們將圖片新增到public目錄內的任何資料夾中，我們需要使用相對路徑，例如‘/folder_path/image_name’。
在這裡，我們使用相對路徑顯示React應用程式的logo作為背景圖片。
import React from "react";
export default function App() {
return (
<div>
<h3>
{" "}
Using relative URLs with React inline styles to set background image
</h3>
<div
class = "image"
style = {{
height: "400px",
width: "550px",
backgroundImage:
'url("https://tutorialspoint.tw/reactjs/images/reactjs-minilogo.jpg")', backgroundSize: "contain", backgroundRepeat: "no-repeat",
}}
>
This div contains a background image.
</div>
</div>
);
}
輸出
在本教程中，我們學習瞭如何使用React內聯樣式設定背景圖片。我們使用了絕對和相對URL來使用‘backgroundImage’ CSS屬性設定背景圖片。
此外，使用者還可以使用CSS屬性來自定義背景圖片，例如將背景圖片固定在div中並避免重複。
更新於：2023年2月28日
22K+ 次瀏覽
廣告