Question

这是我的CSS类，适用于桌面

.banner-img{
background-position: 100%;
    background-image: url(http://d14a6hhmw70jfk.cloudfront.net/spartans11/images/matches_banner.png?v=1523084431);
    background-size: cover;
}

Answer 1

<style>

.banner-img{
    background-position: 100%;
    background-image: (http://d14a6hhmw70jfk.cloudfront.net/spartans11/images/matches_banner.png?v=1523084431);
    background-size: cover;

}
@media (max-width: 750px){
   .banner-img{
       background-size: contain;
   }

}



</style>
<body>

<h1>Background Image Resize on mobile</h1>
<p>Resize the browser and see the effect</p>

<div class="banner-img" style="padding: 400px; color: #fff; font-size: 45px">
<strong>testing background</strong>
</div>
</body>

我的div背景图像对移动设备无响应？如何使其适用于所有移动设备

1 个答案: