如何解决将背景图片应用于<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。