Question

我想在背景中心的jumbotron中放置一个图像，并在前面有标题和textarea，但我无法找到问题，请帮忙。另外，我如何将输入到textarea的数据输入到页面上的其他位置，如状态即facebook状态

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Home Page</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="login.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
    </script>
    </head>

    <body>
        <nav class="navbar navbar-inverse">
      <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sample App</a>
    </div>
    <div class = "navbar-links">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Help</a></li> 
        <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="navLogin">Sign in
            <span class="caret"></span></a>
            <div class="dropdown-menu">
              <form class="form" id="formLogin">
                <input name="username" id="username" type="text" placeholder="Username"> 
                <input name="password" id="password" type="password" placeholder="Password"><br>
                <label><input type="checkbox" value="1" id="remember-me">Remember me</label>
                <br>
                <button type="button" id="btnLogin" class="btn">Sign in</button>
              </form>
            </div>
          </li>
          <li class="sign-up"><a href="sign up form.html">Sign up</a></li>
      </ul>
    </div>
  </div>
    </nav>

<div class="jumbotron">
  <div class="intro">
    <h1>Hello Beautiful</h1>
    <p>Leave a message!</p>
  </div>
  <div class="message-container">
    <form method="post" action="/Anonymous" target="main">
      <textarea name="message" rows=10 cols=70 maxentry=1000 placeholder="Message..."></textarea>
      <br>
      <button type="button" id="message-button">Submit</button>
    </div>
</div>

    </body>
</html>

这是我目前拥有的CSS

.navbar-links a{
    color: white;
}

#formLogin{
    padding:10px;
}

.dropdown-menu input{
    margin: 10px;
}

.jumbotron{
    display: auto;
    text-align: center;
    background-image: url(https://rebelmoustache.files.wordpress.com/2011/12/tumblr_lvl7uyuldf1qhm09f.png) no-repeat center center;
}

Answer 1

因为您为.jumbotron背景图片属性编写了速记符号。如果您想在单行中使用多个属性，则代码必须为background。

<强> Fiddle

<强> CSS

.jumbotron{
    display: auto;
    text-align: center;
    background: url(https://rebelmoustache.files.wordpress.com/2011/12/tumblr_lvl7uyuldf1qhm09f.png) no-repeat center center;
}

为什么我的代码中不显示背景图片？

1 个答案: