Question

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
  <div class="container">
    <div class="row text-center">
      <div style="background-color: rgba(0,0,0,0.5); border-radius: 25px; display: inline-block;">
        <h1>Some text, more text,<br>and more text</h1>
        <p><a href="" class="btn btn-primary btn-lg">Learn more <i class="fa fa-angle-double-right"></i></a></p>
      </div>
    </div>
  </div>
</div>

Answer 1

我之前的评论在我的脑海中，我认为这就是你要找的东西：

/* Use the body for a nice background */
body {
  background-image: url("http://cdn.sploder.com/images/hp3/hp_multiplayer_sploderheads2.gif");
  background-attachment: fixed;
  background-size: cover
}

h2 { margin: 0 }

/* Is a container, only holding <li>'s */
ul {
  display: inline-block;
  margin: 0;
  padding: 0
}

/* Fontsize of H4 is actually 1rem/16px which generally is the default browser fontsize */
li {
  background: linear-gradient(#0CE840, #EFFFE5);
  display: inline-block;
  font-weight: bold /* is actually what you wanted from the <H4> */
}

/* We really didn't want add an image to ALL elements (which * actually means) */
* {
  border: 3px solid #000
}

#main {
  font-size: 100px;
  box-sizing: border- box;
  /* bottom: 90px; HUH? */
  background-image: linear-gradient(#FFE259, #EFFFE5)
}
/* linear- gradient (notice space) does nothing */

<h2 align="center" id="main">Gamerz!</h2>
<ul>
  <!-- NO! H4 inside ul -->
  <li>Home
    <li>Courses
      <li>Support
        <li>Contact us
</ul>

我添加css脚本后，很多不需要的间距，或者它是什么

1 个答案: