如何将图像放在后面而不使其成为背景图像?

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-positionbackground-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>

以上是关于如何将图像放在后面而不使其成为背景图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何使我的网站背景透明而不使内容(图像和文本)也透明?

调整画布图像大小而不使其模糊

将 jpg 文件转换为 UTF-8 而不使其损坏

如何在 Xcode 的 Storyboard 中保持高分辨率图像而不使其像素化?

背景图像未与 s-s-rS 中的气泡图对齐

如何将半透明的“图片/图像”设置为黑白,而不影响子元素和背景颜色? [复制]