在標題上顯示圖像的完整大小[CSS]

我在顯示標題上的整個圖像時遇到問題。我試過包含和封面，沒有一週，任何幫助將不勝感激。這裏是我的問題和代碼的截圖。在標題上顯示圖像的完整大小[CSS]

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>

而這就是我基本上是想擁有，喜歡這幅畫。

來源

2017-04-05 Maryam Al-Mansour

你要解釋，更好，因爲我不知道你問什麼。相反，如果你想從你的原始圖像中獲得圖像，那麼它清楚地顯示出 – LGSon

不知道你真正想要和不想要的，但在這裏，在你的代碼：...

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

...最後一行覆蓋了第一個：同一參數，不同的值 - >後來一個覆蓋較早的一個

如果你的問題是「蓋」背景和基礎的位置，你可能要改變這裏的東西：

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

這center center是位置，所以如果你想要你的背景圖像對齊頂部或底部，改變那第二個「中心」（即垂直位置）設置爲「頂部」或「底部」，或者還設置爲像素值。

來源

2017-04-05 23:53:12 Johannes

謝謝了，所以我想要在標題上顯示完整圖像，所以現在它只顯示圖像的開頭，而不是全部圖像。 –

當然可以 - 你不希望高度被擠壓到170像素，但圖像保持成比例，你會嗎？（也請注意我的問題的編輯） – Johannes

不，我只是希望它適合整個標題，所以我想用一個詞將整個圖片壓縮到標題中。 –

圖像可以設置爲背景，其背景大小屬性可以設置爲覆蓋。

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>

來源

2017-04-06 04:53:52 athi

非常感謝，這是我一直在尋找的，感謝您的幫助，再次感謝！ –

在標題上顯示圖像的完整大小[CSS]

回答

相關問題