畫面的不當表現在CSS

這裏的東西，這是CSS代碼for the image in h1 畫面的不當表現在CSS

h1 { background-color: #000033; 
background-image: url(sunset.jpg); 
background-position: right; 
background-repeat: no-repeat; 
padding-left: 20px; 
height: 72px; 
color: #FFFFFF; 
font-family: Georgia, serif; 
line-height: 200%; 
margin-bottom: 0; }

我使用的是相同的圖片sunset.jpg，但我的代碼是

h1{ 
    background-image:url(images/sunset.jpg); 
    background-position: right; 
    background-repeat:no-repeat; 
    height:72px; 
    padding-left:20px; 
    color: #FFFFFF; 
    margin-bottom:0; 
    background-size:100% 100%; 
    line-height: 200%; 
}

我有使用此代碼

background-size:100% 100%;

我只是不明白，爲什麼在第一個CSS代碼，它不使用background-size:100% 100%;，仍然獲得完美的h1？

來源

2014-09-29 Ave Maleficum

轉到該鏈接，刪除'背景color'設定爲元件。你會看到魔法被寵壞了。 – melancia 2014-09-29 16:29:00

喜歡這裏：http://jsfiddle.net/MelanciaUK/c2bLpszc/ – melancia 2014-09-29 16:30:59

隨着你的改變適用於：http://jsfiddle.net/MelanciaUK/c2bLpszc/1/ – melancia 2014-09-29 16:31:39

就像我在評論中提到的那樣，在該鏈接上使用的想法是有一個background-color混合給圖像給你的印象實際上是一個更廣泛的圖像。

當你試圖重現styles，你錯過了這一點，並得到了它解決通過添加background-size，它不給你同樣的最終結果（實際上拉伸圖像填充容器）。

這是原來的CSS：

h1 { 
    /* Removed the property below so you see what's missing in your styles */ 
    /*background-color: #000033;*/ 
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg); 
    background-position: right; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    height: 72px; 
    color: #FFFFFF; 
    font-family: Georgia, serif; 
    line-height: 200%; 
    margin-bottom: 0; 
}

Demo

你CSS：

h1 { 
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg); 
    background-position: right; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    height: 72px; 
    color: #FFFFFF; 
    font-family: Georgia, serif; 
    line-height: 200%; 
    margin-bottom: 0; 
    background-size:100% 100%; 
}

Demo

來源

2014-09-29 16:34:55 melancia

這是一個完美的答案。你比我的教授好。 – 2014-09-29 17:49:04

欣賞。我很高興我能幫助你。 – melancia 2014-09-29 19:25:31

畫面的不當表現在CSS

回答

相關問題