代码之家 › 专栏 › 技术社区 › Varun Gupta

在套圈框中显示图像作为背景

grommet reactjs css

0

Varun Gupta · 技术社区 · 5 年前

我正在试着设置一个 Box 使用 url 的属性 background 但似乎没有起作用。我创建了一个沙盒来展示这个问题。我添加了一个背景.jpeg本地图像,我设置为框上的背景,但背景图像没有设置为背景。如果我将背景图像设置为某种颜色,比如说“蓝色”,它就会生效。

如何设置背景 盒子 一个图像?

https://codesandbox.io/s/great-sun-tqmhb

0 回复 | 直到 5 年前

1

Lakshya Thakur 5 年前

你可以移动你的 public 文件夹并更改代码,如下所示:-

import "./styles.css";
import { Grommet, Box } from "grommet";
export default function App() {
  return (
    <Grommet>
      <Box
        background="url('background.jpeg')"
        height="200px"
        width="200px"
        border={{ color: "brand", size: "large" }}
      />
    </Grommet>
  );
}

解释 :您的 index.html 基础应用程序的路径(根据CRA内部完成的网页包配置)。它是相对于您检索 .

Codesandbox Link