应用背景图像<img>标签

Question

我有一个 qrcode 图像，我想在所有媒体屏幕上应用这个 qrcode 图像后面的另一个背景图像，但它只集中在大屏幕上..而不适用于其他屏幕。

这是我的代码：

html：

<style>
div.qrcode-frame
{
    height:414px;
    width:300px;
    background:url({{asset('QRblack.png')}}) no-repeat;
    background-size: 100%;
    padding: 10px;
    position: relative;
    top: 50%;
    left: 40%;
}
    @media screen and(max-width:992px)
    {
        div.qrcode-frame
        {
             position: center;
            left: 5%;
        }
    }

@media screen and(max-width:600px)
{
    div.qrcode-frame
    {
        background-position-x: center;
    }
    
}

    img{
        width: 273px;
        height: 273px;
        padding: 13px;
    }
</style>

{{--    <div class="section-title products_title" data-aos="fade-up" >--}}
<div class="qrcode-frame" style="border: solid black;">
            <img src="data:image/png;base64, {!! base64_encode($image) !!}"/>
</div>
        <div>
            <button class="btn-get-started scrollt btn" id="qrqen">Download QRcode</button>
        </div>

Answer 1

您可以简单地向页面添加另一个元素（例如div ），给它一个背景图像并将其放在您的二维码后面。

如果你想让它居中，我建议使用display: flex; 这样，您的 QR 码将始终居中。

看看这个沙盒