如何將圖像設置為 div 容器頂部的背景圖像

Question

我有一個圖案背景，需要在 div 的頂部設置，這是我的容器 div。 我嘗試將 position 絕對值和頂部設置為 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>

Answer 1

您忘記在后台添加l background: url("https://i.ibb.co/NsQ3tXg/Corner-cover.png") repeat-x 0 0並在 class pattern-top添加height

 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>