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

回答

相关问题