CSS - Cover Image Gradient Over

我正在研究在封面圖片上有漸變圖層。我不明白爲什麼它以這種方式發生。CSS - Cover Image Gradient Over

看看下面的代碼。

例如：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content | Source: http://wallpaperlatest.com</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content | Source: http://wallpaperlatest.com/</h1> 
 
</section>

來源

2017-08-03 Hemanth Kumar S

我在代碼中的任何地方都看不到梯度。當你說「我不明白爲什麼會發生這種事情」時，你指的是什麼？ –

你需要詳細說明你的期望和錯誤。你確定漸變是你正在尋找的正確的詞嗎？ – Don

哦，只需要一點時間來編輯我的代碼。我在插入代碼時遇到了一個問題，它顯示出很多錯誤，例如：輸入CTRL + K。我剛剛編輯了一些行，我必須在那裏退後一步。對不起。 –

試試這個：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .8), rgba(220, 66, 37, .8)), url('http://wallpaperlatest.com/wp-content/uploads/latest-wallpapers-in-full-hd-definition.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content | Source: http://wallpaperlatest.com</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content | Source: http://wallpaperlatest.com/</h1> 
 
</section>

來源

2017-08-03 16:04:23

太棒了。感謝您的理解和回答:) –

如果有幫助標記投票這個答案。 –

我只是做@Chandra庫馬爾，因爲我的帳戶是新的它不會公開是說... ...！但我會跟着你。 –

CSS - Cover Image Gradient Over

回答

相關問題