【发布时间】：2019-03-08 10:22:40
【问题描述】：
我得到并发布了如何在 css 中居中我的元素。
我想在我的标题中设置背景图像宽度 100% 和高度 100% 以及一些导航、文本/图像 div 的标题，如下所示。
@import url('https://fonts.googlrapis.com/css?family=poppins:400,500,700');
html,
body {
height: 100%;
width: 100%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.navbar {
background-color: rgba(38, 38, 38, 0.30);
}
.nav-background {
background-image: url(http://localhost/newsystem/images/background.jpg);
repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100%;
object-fit: cover;
}
.header-contain {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
border: 1px solid red;
}
.contain-one {
padding: 5px;
background-color: rgba(0, 116, 217, 0.50);
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%);
}
.header-contain img {
position: absolute;
bottom: 0;
height: 50%;
}<body>
<div class="nav-background">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="header-contain">
<img src="images/umbrella.png">
<div class="contain-one">
<h5>Let's start with us</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, est.</p>
</div>
</div>
</div>
</body>问题是为什么我的 .header-container 高度从导航下方开始。我想要.header-container 与我的.nav-background 图像大小相同。所以我可以将我的.header-container img 修复到导航背景的 div 元素的底部。
以下是我现在面临的图像问题。
【问题讨论】：
-
背景图像不能这样缩放。它的高度将与宽度成比例地增加。所以试试这些东西： 1. 将高度设置为 100%。 2.设置背景大小选项覆盖，居中位置