将背景图片应用于<img>标签

问题描述

我有一个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>

解决方法

您可以简单地向页面添加另一个元素（例如div），为其提供背景图片并将其放置在QR码后面。

如果您想将所有内容居中，我建议使用display: flex; 这样，您的QR码将始终保持居中。

看看这个sandbox