Блог

у меня есть изображение 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>
  

Вы можете просто добавить другой элемент (например, a div ) на страницу, придать ему фоновое изображение и поместить его за своим QR-кодом.

если вы хотите расположить все по центру, я рекомендую использовать display: flex; этот способ, чтобы ваш QR-код всегда оставался в центре.

Взгляните на эту песочницу