背景圖像大小調整問題
[英]Background Image Resizing Issue
問題描述
在移動設備上，將主體設置為（position：fixed）時，我的背景圖像看起來像這樣。
這是將主體設置為（position：relative）時背景圖像的外觀。
您可以知道，當主體設置為（position：fixed）時，它傾向於比其他主體更縮小，並且我不確定為什么會發生此問題。該問題也僅在移動設備上發生。看起來像第二張看起來正確的圖像，但是比第二張圖像縮小得多。 這是主要代碼：
HTML：
<body>
<div class="background">
<div class="hero">
</div>
</div>
</body>
CSS：
body {
margin:0;
padding:0;
width:100%;
height:100%;
position:fixed;
background-color:#fff;
font-family: 'Open Sans', sans-serif;
}
/* Background Space */
.background {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
/* Background Image */
.hero {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
background-image: url('../images/background.jpg');
background-repeat:no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
background-position:50% 50%;
width:100%;
height:100vh;
}
我在這里先向您的幫助表示感謝！
2 個解決方案
解決方案1
0 2016-08-28 23:33:27
嘗試從此新代碼開始，然后開始擺弄。 讓我知道你的想法。 在用作屬性的情況下，您用作屬性的很多東西甚至什么都沒有做。 例如，為具有相對位置的元素設置top，left，bottom和right不會執行任何操作。 您可能希望將這些屬性用於絕對位置的東西。
您可以獲得完整高度的背景圖像，而其用語卻少得多。 首先嘗試下面的代碼段。
html,body { margin: 0; height: 100%; } #hero { background: url('../img/hero.jpg') center center / cover no-repeat; height: 100%; width: 100%; position: relative; z-index: -10; } #overlay { background: rgba(0,0,0,0.5); top: 0; left: 0; height: 100%; width: 100%; position: absolute; z-index: 50; }
解決方案2
0 2016-08-29 04:53:57
嘗試使用@media查詢
@media screen and (max-width: 770px) {
.hero {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
background-image: url('http://i.stack.imgur.com/OMCdB.png');
background-repeat:no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
width:100%;
height:100vh;
}
注意：更改窗口大小並希望您接受的輸出在那里。 在現場演示中。 最大寬度在移動設備中設置背景。
現場 演示
使用CSS調整div背景圖片的大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.