我的网站设计涉及页面中间的圆形幻灯片。背景图像是一个重复的圆圈，它不会移动，但是..我无法将它与我的圆圈居中以匹配..
我正在使用 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;
我得到的结果和我在这里做的 fiddle 很相似: http://jsfiddle.net/LG5r9/1/
较小的蓝色圆圈(黑色边框)必须位于较大的蓝色圆圈的中间。我该如何解决这个问题？老实说，我很无能。
编辑:我很愚蠢。如果您以 1:1 的分辨率使用浏览器，它会完美居中。是否可以修复它以使其与任何浏览器设置兼容？
最佳答案
您可以为此使用 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>
关于html - 中心背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18464560/