如何获得覆盖页面的背景图像和居中图像的按钮

我使用的是angular 13，下面是我编写的CSS。

.image{
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.about-us {
position: relative;
margin-top: 20%;
margin-bottom: 2%;
}
.login {
margin-top: 2%;
margin-bottom: 2%;
}
.social-media {
margin-top: 2%;
margin-bottom: 20%;
}
.button-box {
height: 40px;
width: 80px;
font-size: 10px;
border: 1px solid;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
box-sizing: border-box;
background-color: rgb(68, 127, 178);
}
#text-style {
text-align: center;
position: relative;
}

<body
[ngStyle]="{
backgroundImage: 'url(./../../assets/family-history-image.jpg)'
}"
class="image"
>
<div id="text-style">
<div class="about-us" routerLink="/about-us" routerLinkActive="active">
<button class="button-box" type="button">about-us</button>
</div>
<div class="login" routerLink="/login" routerLinkActive="active">
<button class="button-box" type="button">login</button>
</div>
<div
class="social-media"
routerLink="/social-media"
routerLinkActive="active"
>
<button class="button-box" type="button">social-media</button>
</div>
</div>
</body>

这是我写的html，它没有按预期工作。最后的输出显示了按钮和图像的上边距，但我希望上边距只用于按钮，图像应该占据整个页面。这是该代码的最终输出。

这里有一种方法，您可以使用稍微不同的方法来解决问题。当然，您需要将picsum.photos库存图像换成您想要的图像URL。

body {
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url('https://picsum.photos/1920/1080');
}
.about-us {
position: relative;
margin-top: 20%;
margin-bottom: 2%;
}
.login {
margin-top: 2%;
margin-bottom: 2%;
}
.social-media {
margin-top: 2%;
margin-bottom: 20%;
}
.button-box {
height: 40px;
width: 80px;
font-size: 10px;
border: 1px solid;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
box-sizing: border-box;
background-color: rgb(68, 127, 178);
}
#text-style {
text-align: center;
position: relative;
}

<body
class="image"
>
<div id="text-style">
<div class="about-us" routerLink="/about-us" routerLinkActive="active">
<button class="button-box" type="button">about-us</button>
</div>
<div class="login" routerLink="/login" routerLinkActive="active">
<button class="button-box" type="button">login</button>
</div>
<div
class="social-media"
routerLink="/social-media"
routerLinkActive="active"
>
<button class="button-box" type="button">social-media</button>
</div>
</div>
</body>

希望这能有所帮助！

.image {
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: auto;
}
.about-us {
position: absolute;
margin-top: 21%;
margin-left: 42%;
}
.login {
position: absolute;
margin-top: 27%;
margin-left: 42%;
}
.social-media {
position: absolute;
margin-top: 33%;
margin-left: 42%;
}

<body
[ngStyle]="{
backgroundImage: 'url(./../../assets/family-history-image.jpg)'
}"
class="image"
>
<div id="text-style">
<div class="about-us" routerLink="/about-us" routerLinkActive="active">
<button class="button-box" type="button">about-us</button>
</div>
<div class="login" routerLink="/login" routerLinkActive="active">
<button class="button-box" type="button">login</button>
</div>
<div
class="social-media"
routerLink="/social-media"
routerLinkActive="active"
>
<button class="button-box" type="button">social-media</button>
</div>
</div>
</body>

我尝试了这个，它实现了我想要实现的目标。

相关内容

最新更新

热门标签：