我使用bootstrap
并且我有一张背景图片。它由CSS设置实现基本上是一种视差。
一切正常,但图片尺寸为4066 x 4066
,因此我将尺寸设置为background-size: 36%
。问题在于响应式视图:在手机上看起来很小。知道如何解决这个问题吗?
您可以查看下面的代码:
#home{
background-size: 36% !important;
background-position: 50% 26% !important;
background: url('/assets/img/light_green2_home.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
display: block;
position: relative;
height: 520px;
}
答案 0 :(得分:1)
您可以使用(对于小于600像素的屏幕):
@media all and (max-width: 600px) {
#home{
background-size: 50% !important;
}
}
答案 1 :(得分:1)
您正在实施响应式背景图像。
考虑在媒体查询集上使用max-width
来调整background-size: "some percentage"
。我建议使用background-size:cover
作为原始图片,这样可以确保您的图片填充元素而不会重叠或“重叠”。
#home {
background-size: cover;
}
@media all and (max-width: "some number"px) {
#home {
background-size: 60%;
}
}
关于CSS媒体查询的一些阅读here。
我建议不要针对特定的设备尺寸,而是将max-width
设置为刚开始看起来太小的时候。