【问题标题】：Remove space from the right side of an image in a nav-bar using CSS使用 CSS 从导航栏中的图像右侧删除空间
【发布时间】：2018-09-11 08:26:30
【问题描述】：
我有一个包含导航栏的简单主标题，我想更改图像右侧的对齐方式。
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
这是我所拥有的：
如您所见，标题右侧和左侧有空间，我希望图像浮动右侧并删除右侧的空间，但左侧应该有那个空白。
这就是我想要的：
我的代码中缺少什么？
【问题讨论】：
标签：
html
css
flexbox
bootstrap-4
【解决方案1】：
您可以在background-position 属性上使用边缘偏移值。
通过使用负值，我们可以将图像进一步向页面右侧偏移，从而为您提供所需的效果。
阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: right -190px bottom;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
【解决方案2】：
通过添加一对 div
添加了 marketing-main-header_banner_image 以保存可以大于 marketing-main-header_banner 的图像。
添加了 nav-holder 以将 navbar-toggler 按钮放置在正确的位置。
html,
body {
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner {
overflow: hidden;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
.marketing-main-header_banner_image {
overflow: visible;
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 2000px;
}
.nav-holder {
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
width: 1700;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<div class="marketing-main-header_banner_image">
<div class="nav-holder">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>