[英]The header image is closing up when mobile screen
我正在为自己的公司制作网页。 我选择Bootstrap是因为它具有移动功能。 我有一个问题:
这是代码:
#heading {
display: block;
width: 100%;
height: 543px;
background: url('../images/header.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: inset 0 -4px 9px -3px #000;
-moz-box-shadow: inset 0 -4px 9px -3px #000;
box-shadow: inset 0 -4px 9px -3px #000;
}
@media(max-width:563px) {
#heading {
display: block;
width: 100%;
height: 300px;
background: url('../images/headerm.jpg') no-repeat center center fixed;
}
#navigation .navlinks li {
margin-right: 1px;
}
#navigation .navlinks li a {
padding: 0 5px;
font-size: 12px;
}
}
我尝试对媒体查询使用其他大小的图像,但是没有用。
这是测试方案的链接。 如果缩小浏览器以模拟手机屏幕,则图像不会关闭。 它必须在电话上。
@media(max-width:563px) {
#heading {
display: block;
width: 100%;
height: 300px;
background: url('../images/headerm.jpg') no-repeat center center scroll;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
}
应该管用。 更改为固定滚动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.