HTML-背景圖片定位
[英]HTML - background image positioning
問題描述
我對HTML5中的背景圖片定位有疑問。 我想將我的照片放在中央，但沒有用。 這是我在外部CSS文件中使用的代碼：
body {
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: center center;
}
其他兩個單詞的命令也存在相同的問題（例如：“左下；”）。 語法很好（多次檢查），並且仍然相同： problem_image
我不明白問題所在，請幫忙？！
4 個解決方案
解決方案1
0 2019-01-15 00:02:03
簡短答案： background-attachment: fixed
詳細信息：CSS中的background-attachment屬性指定如何相對於視口移動背景。
有三個值：scroll，fixed和local。 最好的解釋方法是通過演示（嘗試滾動各個背景）：
@import "compass/css3"; h2 { text-align: center; margin-top: 48px; } div { height: 200px; width: 50%; max-width: 600px; margin: 32px auto; overflow-x: hidden; overflow-y: scroll; } .scroll { background: url('http://lorempixel.com/600/200/animals'); background-attachment: scroll; } .fixed { background: url('http://lorempixel.com/600/200/animals'); background-attachment: fixed; } .local { background: url('http://lorempixel.com/600/200/animals'); background-attachment: local; } .expand { height: 400px; width: 100%; } .extra-space { margin-bottom: 50px; }
<h2><code>scroll (default)</code></h2> <div class="scroll"><div class="expand"></div></div> <h2><code>fixed</code></h2> <div class="fixed"><div class="expand"></div></div> <h2><code>local</code></h2> <div class="local"><div class="expand"></div></div> <br class="extra-space">
scroll是默認值。 它與主視圖一起滾動，但在局部視圖內保持固定。
fixed保持固定，無論如何。 這有點像物理窗口：在窗口中移動會改變您的視角，但不會改變窗口外部的位置。
之所以發明local是因為默認滾動值的作用類似於固定背景。 它同時與主視圖和本地視圖一起滾動。 您可以使用它來完成一些非常酷的事情。
解決方案2
0 2019-01-15 00:14:05
如果您將100vh的高度增加到背景的中心位置，請檢查以下代碼段：
100vh-是視口的高度（網頁的可見區域）
body { background-image: url(https://via.placeholder.com/150/0000FF/808080); background-repeat: no-repeat; background-position: center center; height: 100vh; margin: 0; }
<html> <body> </body> </html>
解決方案3
0 2019-01-15 02:11:42
html和body元素是塊級元素，就像div 。 如果沒有明確設置高度，則它們只會假設其內容的高度，或者如果沒有內容，則其高度將為0。
因此，您需要將body元素的高度設置為與視口高度相同的大小，以實現目標。 最好的方法是使用視口相對單位：
body {
height: 100vh;
background-image: url(logo.jpg) no-repeat center;
}
替代方法：
另一種方法是將html 和 body高度設置為100％
html,
body {
height: 100%;
}
body {
background-image: url(logo.jpg) no-repeat center;
}
您必須同時設置兩者，因為使用百分比單位時， body高度是相對於html高度的。
解決方案4
0 2019-01-15 03:56:52
您可以使用transform屬性在中心設置圖像。您只需要在CSS中調用圖像類並編寫此代碼即可。
.imgclass{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
這會將您的圖像設置在身體的中央。 如果您使用的是引導程序，則只需在HTML圖像類中編寫align-self-center 。
HTML \\ CSS：背景圖片定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.