在 header [CSS] 上显示完整尺寸的图像

Question

我在 header 上显示整个图像时遇到问题。我尝试了 contain 和 cover，一周都没有，任何帮助都是 appreciated.Here 是我的问题和代码的屏幕截图。

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

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

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

...最后一行覆盖第一行：相同的参数，不同的值 -> 后面的覆盖前面的

如果您的问题是 "cover" 背景的位置，您可能需要在此处进行一些更改：

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

这个 center center 是位置，因此如果您希望背景图像顶部或底部对齐，请将第二个 "center"（即垂直位置）更改为 "top" 或"bottom"，或者也为一个像素值。

Answer 2

图片可以设置为背景，其background-size 属性可以设置为覆盖

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>

在 header [CSS] 上显示完整尺寸的图像

Show the full size of image on a header [CSS]

html

css

background-image