Question

我有一张照片，我把它作为我网页的背景。

body
{
    background-image: url('../Image/Background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

我有一个DIV，我想把它放在背景图像的中心我应该将填充左侧和顶部设置为50％吗？

Answer 1

<html>
<head>
    <style type="text/css">
        body {
        background-color: blue; 
        background-repeat: no-repeat;
        }
        .div {
            position:absolute;
            width:100%;
            text-align:center;
            height: 100px;
            top: 100px;
        }
</style>
</head>
<body>
    <div class ="div">
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
        <p>ahgdsgdhuagh</p>
    <div>
</body>
</html>

这应该可以解决问题。

Answer 2

如果是固定宽度（比如500px×300px）那么你可以这样做：

#myDiv
{
    position:fixed;
    width:500px;
    height:300px;
    left:50%;
    top:50%;
    margin-left:-250px; /*half the width*/
    margin-top:-150px; /*half the height*/
}

背景图像的位置元素中心

2 个答案: