Html 背景图像未显示在样式化组件中

我正在开发一个电子商务应用程序。我试图在我店里的商品上显示一个卖完的覆盖图。这是我设计的组件

export const PreviewSoldOut=styled.div`
div{
网格区域：预览；
宽度：自动；
最大高度：560像素；
对象匹配：包含；
背景位置：中心；
背景图像：
网址（“http://localhost:8000/media/products/saleordemoproduct_cuschion01.png");
img{
宽度：100%；
对象匹配：包含；
}
}
`;

这是我的反应组件

但它只显示覆盖而不是显示在产品图像上

但我想这样，售罄将超过商品图片

（我没有足够的声誉发表评论，所以我现在就回答。）

测试1：

您确定

soldOutThumb

图像的背景是透明的吗

测试2：

我认为问题是由于样式化组件中嵌套了

div

。尝试：

export const PreviewSoldOut = styled.div`
  div {      /* <-------- remove this line */
    grid-area: preview;
    width: auto;
    max-height: 560px;
    object-fit: contain;
    background-position: center;
    background-image: url("http://localhost:8000/media/products/saleordemoproduct_cuschion01.png");

    img {
      width: 100%;
      object-fit: contain;
    }
  }        /* <-------- remove this line */
`;

export const PreviewSoldOut=styled.div`
div{/*谢谢，但是索尔多特姆有一个透明的背景。我已经编辑了我的文章。
import React from "react";
import styled from 'styled-components'
import "./styles.css";

const PreviewSoldOut = styled.div`

    width: auto;
    height: 500px;
    background-image:  url("https://ychef.files.bbci.co.uk/1600x640/p02940bz.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

`;

//         
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <PreviewSoldOut>
        <img src='https://udi.bc.ca/wp-content/uploads/2018/04/Sold-Out-Transparent-300x129.png' />

      </PreviewSoldOut>
    </div>
  );
}