Question

我正在创建一个主页，其中有一个图像覆盖整个屏幕，该图像的中心将有一个徽标和一个链接，将用户带到实际的网站。

一切正常，但我的图片和链接自动在图片下方，我找不到修复。

这是我的HTML：

<div id="homebackground">
    <img src="img/home.jpg" id="homebackgroundimage" alt="homebackgroundimage">
    <div id="entersite">
        <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo"><br />
        <a href="about.html" id="entersitelink">Enter Site</a>
    </div>
</div>

这是我的css：

#homebackground{
    width:100%;
    height:auto;
    position:relative;
}

#homebackgroundimage{
    width:100%;
    height:auto;
    position:relative;
    display:block;
}

#entersite{
    margin:auto;
    text-align:center;
    width:50%;
    height:50%;
    position:absolute; z-index:-1;
}

#logohome{
    max-width:15%;
    max-height:15%;
    margin:auto;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
}

#entersitelink{
    z-index:1;
    position:absolute;
    text-align:center;
}

Answer 1

如果这只是您要在页面上显示的内容，则不需要那么多代码。您可以添加一个带有背景图像的容器，并在其中添加徽标和链接。

＆＃13;

.container{
    width: 100%;
    height: 100vh;
    background-image: url("here go url for background image");
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

＆＃13;

<div id="container">
  <img src="img/dignanslogo.jpg" id="logohome" alt="dignans-logo">
  <a href="about.html" id="entersitelink">Enter Site</a>
</div>

＆＃13;

现在你不需要弄乱绝对位置和z-index。此外，如果您对默认样式不满意，则需要设置图像和链接的样式。

Answer 2

你需要给父div提供背景并将绝对位置设置为内部div并需要改进css ...立即检查

＆＃13;

#homebackground{
    width:100%;
    height:100vh;
    position:relative;
    background:url('https://dummyimage.com/600x400/000/fff') no-repeat center center;
    background-size:cover;
}

#homebackgroundimage{
    width:100%;
    height:auto;
    position:relative;
    display:block;
}

#entersite{
    margin:auto;
    text-align:center;
    width:50%;
    height:50%;
    top:50%;left:50%;transform:translate(-50%,-50%);
    position:absolute; 
    z-index:9;
}

#logohome{
    margin:auto;
    width:250px;
    height:150px;
}

#entersitelink{
    z-index:1;
    text-align:center;
}

＆＃13;

<div id="homebackground">
    <div id="entersite">
        <img src="https://www.google.co.in/logos/doodles/2017/hirotugu-akaikes-90th-birthday-5767291382792192-l.png" id="logohome" alt="dignans-logo"><br />
        <a href="about.html" id="entersitelink">Enter Site</a>
    </div>
</div>

＆＃13;

如何将div叠加到带有图像的div上？

2 个答案: