如何创建背景图像并在其上添加文本

Question

To start i am very new to bootstrap but i wanted do something similar to this example: text over background image but inside of a bootstrap framework. 开始我是一个非常新的bootstrap但我想做类似于这个例子：文本在背景图像，但在一个bootstrap框架内。 I have tried creating a div inside the container below the navbar but that seems to put a white background behind the text covering the image behind... you can see my code here: JSFiddle: my code . 我已经尝试在导航栏下面的容器内创建一个div但是这似乎在文本后面放了一个白色背景覆盖了后面的图像......你可以在这里看到我的代码：JSFiddle：我的代码。 or it is as follows: 或者如下：

CSS CSS

body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

@import url(http://fonts.googleapis.com/css?family=Oswald:700);

html { 
background: url(http://3.bp.blogspot.com/_6r-mOI0OuO0/S6q3VodCqI/AAAAAAAAB5A/Uycl8dCr92A/s1600/NYC15BrooklynBridge02.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Oswald', sans-serif;
}

h1 {
color: #fff;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}

span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #fff;
}

HTML HTML

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Full - Start Bootstrap Template</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/full.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Oswald:700);


h1 {
color: #FF6600;
text-align: center;
font-size: 120px;
text-transform: uppercase;
}

span {
font-size: 130px;
color: transparent;
text-shadow: 0 0 10px #FF6600;
}
</style>

</head>

<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Start Bootstrap</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

<div class="container">
<h1>
  <span>some text</span><br>some other text
</h1>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

</body>

</html>

Answer 1

Just add body { background: none; } 只需添加body { background: none; } body { background: none; } . body { background: none; } 。 FIDDLE 小提琴

Answer 2

I see that you had added the CSS style to the whole body which means you then have to turn off all background for everything that sits on top of it. 我看到你已经将CSS样式添加到整个身体，这意味着你必须关闭所有背景，以便放在它上面。 But you could just add the style you created to the container with the text in it. 但您可以将创建的样式添加到容器中，并在其中添加文本。 You then may need to style the text to make is visible. 然后，您可能需要设置要显示的文本样式。

<div class="container full">
    <h1>some text</h1>
    <h1>some other text</h1>
</div>

Btw You really shouldn't have two bits of header text split with a break, use two headers and position them. 顺便说一句你真的不应该有两个标题文本分开与中断，使用两个标题并定位它们。 Also you really should close the break tag if your going to use it. 如果你打算使用它，你真的应该关闭break标签。 :) :)

如何创建背景图像并在其上添加文本

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-12-06 07:15:02

解决方案2
1 2014-12-06 07:16:49

如何创建背景图像并在其上添加文本

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-12-06 07:15:02

解决方案2 1 2014-12-06 07:16:49

解决方案1
2 已采纳 2014-12-06 07:15:02

解决方案2
1 2014-12-06 07:16:49