css - 如何将图像设置为 div 容器顶部的背景图像

Question

我有一个图案背景，需要在 div 的顶部设置，这是我的容器 div。我尝试将绝对位置和顶部设置为 0。但图像没有出现在顶部容器上。我在下面附上了小提琴。

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="pattern-top"></div>
        <div>Hello World!</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.container {
  position: relative;
  width: 100%;
  background-color: #fcbe07;
  padding: 25px 15px;
}

.pattern-top {
  position: absolute;
  background: ur("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0;
  top: 0;
  width: 100%;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： cssreactjs

Answer 1

您忘记添加l和background: url("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0添加height类pattern-top

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="pattern-top"></div>
        <div>Hello World!</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.container {
  position: relative;
  width: 100%;
  background-color: #fcbe07;
  padding: 25px 15px;
  margin-top:30px;
}

.pattern-top {
  position: absolute;
  background: url("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0;
  top: -25px;
  width: 100%;
  height: 100%;
  left:0;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>