Question

我在标题上显示整个图像时遇到问题。我尝试了包含和覆盖，没有任何一周，任何帮助将不胜感激。这是我的问题和代码的截图。

body {
  font-family: 'Roboto';
  color:#464655;
  background-color: #E5E0CD;
  outline:none;}

a {text-decoration: none;}

h1{
    font-family:"SummerHearts-Regular";
    font-size:30px;
    text-align:center;
    letter-spacing:16px;}

  #cd-intro {
  background: url(trees.jpg) no-repeat center center fixed;
  z-index: 2;
  margin: 0 auto;
  display:block;
  background-size:100% 170px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

#cd-intro #cd-intro-tagline {
  width: auto;
  width:90%;
  position:relative;
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;}

  @media only screen and (min-width: 1170px) {
  #cd-intro {
    height: 170px; 
  }
  #cd-intro #cd-intro-tagline {
    padding-top: 5px;
  }
  #cd-intro input {
    font-size: 50px;
  }
}

.cd-btn {
  display: inline-block;
  padding: 1em 1.8em;
  background-color:#D23C69;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #E5E0CD;
}

<html>
<body>
<header>
    <section id="cd-intro">
        <div id="cd-intro-tagline">
            <img src="C:\Users\Maryam\Desktop\TravelGeni\Trip\css\Travel Geni.png" alt="Mountain View" style="width:110px;left:-80px;top:0;position:absolute;">

             <h1 style="top:0;">Edit Trip</h1>
             <a href="" class="cd-btn">Delete</a>
            <a href="" class="cd-btn">Mark Complete</a>


        </div> <!-- #cd-intro-tagline -->
    </section> <!-- #cd-intro -->
</header> 
</body>
</html>

这就是我本来希望拥有的，就像这张照片。

Answer 1

图像可以设置为背景，其背景大小属性可以设置为覆盖。

body {
  font-family: 'Roboto';
  color: #464655;
  background-color: #E5E0CD;
  outline: none;
}

a {
  text-decoration: none;
}

h1 {
  font-family: "SummerHearts-Regular";
  font-size: 30px;
  text-align: center;
  letter-spacing: 16px;
}

#cd-intro {
  background: url(http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg) no-repeat;
  z-index: 2;
  margin: 0 auto;
  display: block;
  background-size: 100% 170px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#cd-intro #cd-intro-tagline {
  width: auto;
  width: 90%;
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;
}

@media only screen and (min-width: 1170px) {
  #cd-intro {
    height: 170px;
  }
  #cd-intro #cd-intro-tagline {
    padding-top: 5px;
  }
  #cd-intro input {
    font-size: 50px;
  }
}

.cd-btn {
  display: inline-block;
  padding: 1em 1.8em;
  background-color: #D23C69;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #E5E0CD;
}

<body>
  <header>
    <section id="cd-intro">
      <div id="cd-intro-tagline">
        <h1 style="top:0;">Edit Trip</h1>
        <a href="" class="cd-btn">Delete</a>
        <a href="" class="cd-btn">Mark Complete</a>
      </div>
      <!-- #cd-intro-tagline -->
    </section>
    <!-- #cd-intro -->
  </header>
</body>

Answer 2

不确定你真正想要和不想要的是什么，但是在你的代码中......：

 background-size:100% 170px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

...最后一行覆盖第一行：相同的参数，不同的值 - ＆gt;后来有人覆盖了之前的一个

如果你的问题是“封面”背景的位置，你可能想在这里改变一些东西：

background: url(trees.jpg) no-repeat center center fixed;

此center center是位置，因此如果您希望背景图像在顶部或底部对齐，请将第二个“中心”（即垂直位置）更改为“顶部”或“底部”，或者到像素值。

在标题[CSS]上显示图像的完整大小

2 个答案: