Question

我想知道为什么这个CSS代码显示两个相同的背景图像，即使我只设置一个，下面是代码：

html, body {
margin: 0;
padding: 0;
}

body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}

.container {
margin: 0 auto;
max-width: 940px; 
padding: 0 10px; 
}


/* Header */
.header {
  height: 800px;
  text-align: center;
  background-repeat: no-repeat;
  background: url(http://www.bolsamania.com/cine/wp-    content/uploads/2016/07/9-2.jpg);
  color: white;
  padding: 100px;
  background-repeat: no-repeat;
}

.header .container {
    position: relative;
top: 200px;
}

.header h1 {
font-size: 80px;
line-height: 100px; 
margin-top: 0;
margin-bottom: 80px;
}

@media (min-width:850px) {
.header h1 {
    font-size: 120px;
}
}

.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
}

.btn:hover {
background: #117bff;
cursor: pointer; 
transition: background .5s;  
}


/* Nav */
.nav ul {
list-style: none;
margin: 0 auto; 
padding: 30px 0;
text-align: center;

}
.nav ul li {
  display: inline-block;
  background-color: white;
  padding: 1px 2px 1px 2px;
  border: 1px solid black;
  border-radius: 5px;

}

.nav {
  background-color: black;
}

/* Main */
.main .container {
margin: 80px auto;
}


/* Jumbotron */
.jumbotron {
height: 600px; 
text-align: right;
}

.jumbotron .container {
position: relative;
top: 220px;
}


/* Footer */
.footer { 
font-size: 14px;
}

/* Media Queries */
@media (max-width: 500px) {
  .header h1 {
font-size: 50px;
line-height: 64px;

  }

  .main, .jumbotron {
padding: 0 30px;

  }

  .main img {
    width: 100%;
  }
}

.btn {
  border: 1px solid black;
  text-decoration: none;
  border-radius: 5px;
  padding: 5px;
  background-color: #808080;
  color: white;
  margin-bottom: 10px;
}

.main img {
  float: left;
  size: contain;
}

即使我添加了background-repeat: no-repeat;，图像也会重复在此先感谢您的帮助。

您还应该能够在此链接中看到HTML和CSS完整代码：https://gist.github.com/2bc611f755c242271cb6984a0ed11cf7

再次感谢。

Answer 1

你在哪里添加background-repeat: no-repeat？如果您在 background之前添加，那么它将无效，因为background速记会将其设置回repeat。如果你在之后添加，它就会。

这让我咬了几次，所以我尽量避免使用background速记。

Answer 2

经过一些检查，问题是你有2＆＃34;标题＆＃34;你的HTML中的元素：

＆＃13;

<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <div class=header>
    <h1>INNOVATION CLOUD</h1>
    <p>CONNECT YOUR IDEAS GLOBALLY</p>
    <a href="#" class=btn>Learn More</a>
    <link rel='stylesheet' href='style.css'/>
    </div>
  </head>
  <body>
    <div class="header">
      <div class="container">
        
      </div>
    </div>

    <div class="nav">
      <ul>
        <li>Register</li>
        <li>Schedule</li>
        <li>Sponsor</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
      <div class="container">
        
      </div>
    </div>

    <div class="main">
      <img src="http://www.themarysue.com/wp-content/uploads/2015/12/Kylo_Ren.jpg" class=kylo/>
      
      <div class="container">
        

        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

    
  </body>
</html>

＆＃13;

如果你看看你的头脑里面＃34;元素，你有一个额外的导致重复。该元素的结束标记也位于div

的正上方

Answer 3

您好，只需删除background-size: cover;并尝试以下代码

header {
 height: 800px;
 text-align: center;
 background: url(http://www.bolsamania.com/cine/wp-content/uploads/2016/07/9-2.jpg);
 color: white;
 padding: 100px;
 background-repeat: no-repeat;
        }

感谢

Answer 4

no-repeat就是您所需要的。CSS background-repeat Property

CSS背景图像重复自身

4 个答案: