在 <img> 标签上应用背景图像

Question

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

这是我的代码：

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），给它一个 background-image 并将其放在您的 QR-code 之后。

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

看看这个sandbox

在 <img> 标签上应用背景图像

Apply background-image on <img> tag

html

css

frontend

responsive-design