CSS - 封面图像上的渐变？

例如：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

我想这个梯度的形象：

background-image: linear-gradient(to bottom right, #002f4b, #dc4225);

这可能吗？

来源

2017-07-01 laukok

在你的情况，你才可能更换梯度，而不是图像。如果你想要通过这个图像，你需要添加另一个梯度块。 –

使用rgba透明度和双background-image。

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: linear-gradient(to bottom right, rgba(0, 47, 75, .5), rgba(220, 66, 37, .5)), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

来源

2017-07-01 12:32:11 Gerard

你可以把覆盖在：或之前：之后元素

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
} 
 

 
header:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: linear-gradient(to bottom right,#002f4b, #dc4225); 
 
    opacity: .6; 
 
    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</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

来源

2017-07-01 12:22:28 mikaelrs

或''后选择器！ –

可以定义多个背景，然后设置background-blend-mode到multiply。事情是这样的

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    background-blend-mode: multiply; 
 
    background: linear-gradient(to bottom right, #002f4b, #dc4225), url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
} 
 

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

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

来源

2017-07-01 12:25:54

注：你可以用opacity调整来改变梯度的强度。

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    background-image: url('http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg'); 
 
    background-size: cover; 
 
    border-bottom-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    z-index: -1; 
 
} 
 

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

 
header h1 { 
 
    color: white; 
 
} 
 

 
div#gradient { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 300px; 
 
background-image: linear-gradient(to bottom right, #002f4b, #dc422b); 
 
border-bottom-left-radius: 50%; 
 
border-bottom-right-radius: 50%; 
 
z-index: -1; 
 
opacity: 0.75; 
 
}

<header> 
 
    <div id="gradient"></div> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

来源

2017-07-01 16:51:04

它看起来不错。谢谢！ :-) – laukok

CSS - 封面图像上的渐变？

回答

相关问题