css - 如何将背景图像添加为背景，其上方有一个跨度答案

【问题标题】：css - how to add Background Image as background with a span above itcss - 如何将背景图像添加为背景，其上方有一个跨度
【发布时间】：2021-09-02 11:59:03
【问题描述】：

我想做一个这样的按钮

这是我目前的进度

我想知道如何在不遮挡上方文字和图标的情况下添加背景图片。

App.js

import "./styles.css";

import CloudUploadOutlinedIcon from "@material-ui/icons/CloudUploadOutlined";

export default function App() {
  return (
    <div className="App">
      <div
        className="photo__wrapper__img"
      >
        <div className="__photo__wrapper__img__label-container">
          <div>
            <CloudUploadOutlinedIcon style={{ color: "white" }} />
          </div>
          <span>Click here to change photo</span>
        </div>
      </div>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.photo__wrapper__img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(60, 67, 74, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.photo__wrapper__img .photo__wrapper__img__label-container {
  text-align: center;
}

代码沙盒
https://codesandbox.io/s/loving-volhard-747zr?file=/src/App.js

【问题讨论】：

Here 已经是类似的做法了...

标签： javascript css reactjs

【解决方案1】：

PersonIcon 是一个组件。不是 url，所以你应该把它放到外部背景中。并使用位置absolute 作为您的文本详细信息。

https://codesandbox.io/s/romantic-cache-8jghq?file=/src/styles.css

【讨论】：

不，我在 src 文件夹中附加了profile.png。我将它用作背景图片