1

我为我的网站设计的网页中间有一个圆形幻灯片。背景图像是一个不会移动的重复圆圈，但是..我无法将它与我的圆圈居中以匹配..

我正在使用 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 的分辨率使用浏览器，它会完美居中。是否可以修复它以使其与任何浏览器设置兼容？

4

3 回答 3

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>

演示在http://jsfiddle.net/LG5r9/6/

于 2013-08-27T12:14:01.257 回答
0

而不是：

background-position: center top;

只需使用：

background-position: center;

对于 Firefox，您还需要：

-moz-background-position: fixed;

如果你想居中另一个 div tehn 你可以像这样使用绝对位置：

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;

http://jsfiddle.net/Hive7/LG5r9/5/

于 2013-08-27T11:54:25.307 回答
0

您只需将背景图像和前景图像居中即可：

给你：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

于 2013-08-27T11:56:22.893 回答