中心背景圖片
[英]Center background image
問題描述
我為網站設計的頁面中間包含一個圓形幻燈片。 背景圖像是一個重復的圓圈，它不會移動，但是..我無法將其與圓圈對齊以使其居中。
我使用的是1：1背景圖像，以使其完美圓潤。 為了使網站在我使用的所有瀏覽器上都能完美運行
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
我得到的結果類似於我在這里所做的小提琴： http : //jsfiddle.net/LG5r9/1/
較小的藍色圓圈（帶有黑色邊框）必須位於較大的藍色圓圈的中間。 我該如何解決這個問題？ 老實說我很無能為力。
編輯：我很愚蠢。 如果您以1：1的分辨率使用瀏覽器，它將完美居中。 是否可以對其進行修復，使其與任何瀏覽器設置兼容？
3 個解決方案
解決方案1
1 2013-08-27 12:14:01
您可以為此使用CSS表！
CSS
html, body{
height: 100%;
width: 100%;
/* you might want an additional container instead of setting
* the display: table; directly on <body>, depending on use case */
display: table;
background-image:url('http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=2400&ext=.jpg');
background-position: center; /* as mentioned in other answers */
background-repeat: no-repeat;
background-attachment: scroll;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle; /* only works because of table-cell display */
}
#image {
border-radius: 50em;
height: 200px;
width: 200px;
}
HTML
<body>
<div class="container">
<img src="http://www.osa-opn.org/opn/media/Images/AfterImages/13-jan-01.jpg?width=2400&height=3300&ext=.jpg" alt="" id="image" />
</div>
</body>
解決方案2
0 已采納 2013-08-27 11:54:25
而不是：
background-position: center top;
只需使用：
background-position: center;
同樣對於Firefox，您需要：
-moz-background-position: fixed;
如果要將另一個div居中，則可以使用絕對位置，如下所示：
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
解決方案3
0 2013-08-27 11:56:22
您只需要將背景圖像和前景圖像居中：
您在這里： http : //jsfiddle.net/LG5r9/4/
這是在屏幕中間居中放置（前景）元素的方法：
#image {
border-radius: 50em;
height: 200px;
width: 200px;
position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;
}
繼承人如何居中背景圖像： background-position:center
居中較大的背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.