如何将图像放在后面而不使其成为背景图像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将图像放在后面而不使其成为背景图像？相关的知识，希望对你有一定的参考价值。
我正在使用React-Bootstrap并尝试完成此任务：transparent navbar
我希望导航栏为全宽，而顶部带有图像+文本的横幅应为80％并居中。我相信在这种情况下我无法将其作为背景图像，因为我不确定如何在保持导航栏100％的同时使容器具有80％的宽度。
例如，此代码也缩小了菜单：
<div className="jumbo">
<MyNavbar />
<h1>text</h1>
</div>
在style.css中：
.jumbo {
background-image: url("img.jpg");
background-size: cover;
text-align: center;
width: 80%;
}
考虑到我正在尝试创建一个响应式网站，如果我做了这样的事情是不好的做法：
<MyNavbar />
<Image src="img.jpg" id="img">
在style.css中：
#img {
top: -200px;
}
还有其他选择吗？谢谢！
答案
试试这个。
#top-header {
background: rgba(255, 0, 0, 0.36);
position: fixed;
left: 0;
right: 0;
top: 0;
}
.w100 {
width:80%;
margin:0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Code!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bs-docs-nav navbar navbar-static-top" id="top-header">
<div class="container">
<div class="navbar-header">
<button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Bootstrap</a>
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a href="#">Getting started</a>
</li>
<li>
<a href="../css/">CSS</a>
</li>
<li class="active">
<a href="../components/">Components</a>
</li>
<li>
<a href="../javascript/">JavaScript</a>
</li>
<li>
<a href="../customize/">Customize</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="page-inner">
<div class="img-section text-center">
<img src="http://getbootstrap.com/assets/brand/bootstrap-social.png" class="img-responisve w100">
</div>
</div>
<div class="container">
<h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
<p class="lead">Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools. </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>另一答案
你可以利用background-position和background-size来完成工作。您必须单独设置文本样式，以便元素及其文本居中。
.jumbo {
background-image: url("http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.navbar {
background-color: rgba(226, 183, 226, 0.5);
}
h1 {
text-align: center;
width: 80%;
/* margin:auto so that the div is centered */
margin: auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbo">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<h1>text</h1>
</div>以上是关于如何将图像放在后面而不使其成为背景图像？的主要内容，如果未能解决你的问题，请参考以下文章