如何解决如何使我的固定背景响应?
当我的网页响应时,我希望我的背景占据 ipad 视图上的所有空间。它适用于手机,但对于平板电脑它会切断并且图像不会占据整个空间。我认为这可能与我将我的一个媒体查询设置为 1024px 的最大宽度有关,但我不知道我是响应式设计的新手,而且它说我需要输入更多细节。希望所有这些都有意义。
<body>
<div class="bg"></div>
<header>
<section class="title">
<div class="title__step2">
<h1 class="title__head">Step 2</h1>
</div>
<div>
<h1>
Choose your City
</h1>
<p>Welcome to Step Number 2! You're almost there,just tell us which city you are interested in moving to and we can make it happen!</p>
</div>
</section>
</header>
</body>
* {
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
:root {
--main-color: rgba(255,111,15,0.8)
}
.title {
margin-top: 2.5%;
margin-left: 12.5%;
text-align: center;
border: 2px solid black;
width: 75%;
background: var(--main-color);
color: white;
font-family: 'Roboto',sans-serif;
font-size: larger;
}
.title__head {
width: 100%;
margin-top: 0;
padding-top: 7px;
padding-bottom: 7px;
background: white;
color: var(--main-color);
font-family: 'Roboto',sans-serif;
}
@media screen and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
.title {
margin-top: 2rem;
margin-left: 1rem;
width: 21.5rem;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,.cards__bogimage,.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,.cards__bog,.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 4px black solid;
margin-left: 1rem;
}
.cards__med:not(:hover) .choice,.cards__bog:not(:hover) .choice,.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
@media only screen and (min-width: 660px) and (max-width: 1024px) {
.bg {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
}
}
解决方法
我想我有你要找的东西:
首先:从你的 html 和 css 中删除你的 .bg 元素(你不需要它)
然后: 替换:
body {
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
margin: 0;
background-repeat: no-repeat;
background-size: cover;
height: 95vh;
}
与:
html{
background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
height: 100%;
}
body{
margin:0;
padding:0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。