Question

我无法获得覆盖交叉填充背景的文字。为了给它一些背景，我第一次使用bootstrap，并试图复制一个airbnb风格的网站。请让我知道如何做到这一点。我有下面的html和css代码。问题是，当我尝试添加文本时，它要么隐藏在背景后面，要么在前面然后逐渐消失。

<!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">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="custom.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <!-- Connect the Javascript -->
        <script type="text/javascript" src="actions.js"></script>
        <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body> 
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#"> BookDivide </a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Log In</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Starting Guide <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Starting Guide Center </li> 
                                <li><a href="#"> How It Works </a></li>
                                <li><a href="#"> Posting Books </a></li>
                                <li><a href="#"> Renting Books </a></li>
                                <li><a href="#"> Buying Books </a></li>
                            </ul>
                        </li>
                        <li>
                            <p class="navbar-btn"><a href="#" class="btn btn-default"> Post Your Book </a></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="home" class="panel">
            <div class="inner">
                <div id="backgroundchange">
                    <div class="backgroundimg" id="back1"></div>
                    <div class="backgroundimg" id="back2"></div>
                    <div class="backgroundimg" id="back3"></div>
                    <div class="backgroundimg" id="back4"></div>
                    <div class="backgroundimg" id="back5"></div>
                    <div class="lolzies"><h1>hello</h1></div>
                </div>
            </div>
        </div>
        <!-- Footer -->
        <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
            <div class="container">
                <div class="navbar-text pull-left">
                    <P> © BookDivide </p>
                </div>
                <div class="navbar-text pull-right">
                    <a href="#"> <i class="fa fa-facebook-square fa-2x"></i></a>
                    <a href="#"><i class="fa fa-twitter-square fa-2x"></i></a>
                    <a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a>
                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

CSS

.navbar a {
    color: inherit;
    text-decoration: none;
}
html, body {
    height: 100%;
    margin: 0;
}
/* Setting up the div for crossfading background */
 .panel {
    font-family:"Source Sans Pro", Helvetica, Arial, sans-serif;
    color: white;
    height: 100%;
    min-width: 100%;
    text-align: center;
    display: table;
    margin: 0;
    background: #1c1c1c;
    padding: 0 0;
}
.panel .inner {
    display: table-cell;
    vertical-align: middle;
}
.backgroundimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#back1 {
    background: url("image/image1.jpg") no-repeat center fixed;
}
#back2 {
    background: url("image/image2.jpg") no-repeat center fixed;
}
#back3 {
    background: url("image/image3.jpg") no-repeat center fixed;
}
#back4 {
    background: url("image/image4.jpg") no-repeat center fixed;
}
#back5 {
    background: url("image/image5.jpg") no-repeat center fixed;
}
@keyframes backgroundchangeFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes backgroundchangeFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
#backgroundchange div:nth-of-type(1) {
    animation-delay: 40s;
    -webkit-animation-delay: 40s;
}
#backgroundchange div:nth-of-type(2) {
    animation-delay: 30s;
    -webkit-animation-delay: 30s;
}
#backgroundchange div:nth-of-type(3) {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
}
#backgroundchange div:nth-of-type(4) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}
#backgroundchange div:nth-of-type(5) {
    animation-delay: 0;
    -webkit-animation-delay: 0;
}
#backgroundchange div {
    animation-name: backgroundchangeFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 40s;
    -webkit-animation-name: backgroundchangeFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 40s;
}

Answer 1

我猜你使用的bootstrap模板不能满足你的要求。请检查以下链接，并根据您的要求选择模板。

请检查这些模板的查看源，您将了解如何操作。

http://getbootstrap.com/examples/jumbotron/

您可以从此处获取所有示例：

http://getbootstrap.com/getting-started/#examples

由于

在corssfadding背景上叠加文本

1 个答案: