如何使用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>
   );
}

输出

如何使用React内联样式设置背景图像

示例

在下面的示例中，我们在函数组件的返回语句之外创建了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>
   );
}

输出

如何使用React内联样式设置背景图像

示例

在下面的示例中，我们使用相对路径来设置背景图像。用户可以将图像添加到React应用程序的“public”目录中。之后，我们可以使用类似“/image_name”的相对路径，或者如果将图像添加到public目录内的任何文件夹中，我们需要使用类似“/folder_path/image_name”的相对路径。

这里，我们展示了React应用程序的徽标作为背景图像，使用了相对路径。

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://www.tutorialspoint.com/reactjs/images/reactjs-minilogo.jpg")',  backgroundSize: "contain",  backgroundRepeat: "no-repeat",
            }}
         >
            This div contains a background image.
         </div>
      </div>
   );
}