如何在下面的图像上设置顶部和底部的渐变颜色？

-8

顶部和底部有不透明度的颜色渐变，如何使图像在背景中？

2016-09-23 Ismet

当然，你已经尝试过一些东西/研究这个。你发现了什么？为什么这不适合你？ – PeeHaa

预计您至少会尝试自己编写此代码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，做出尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

-1

有多种方式来获得这一点，但这里有一个与伪元素：

观JSfiddle。

body {padding: 0; margin: 0;} 
 

 
.imgholder { 
 
    position: relative; 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 

 
.imgholder::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none; 
 
    background: linear-gradient(rgba(40, 40, 40, 0.5), transparent 25%); 
 
} 
 

 
.imgholder::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none; 
 
    background: linear-gradient(0deg, rgba(40, 40, 40, 0.5), transparent 25%); 
 
}

<div class="imgholder"> 
 
<img src="http://www.greenleafown.tv/wp-content/themes/15zine/library/images/placeholders/placeholder-360x240.png" width="360" height="240"> 
 
</div>

来源

2016-09-23 09:42:21 pol

-1

我知道该怎么做，但你不付给我= d 所以，你要自由的反应，后前询问谷歌在那里。刚刚发现这个第一谷歌的搜索结果 “CSS gardient发生器：”

http://www.colorzilla.com/gradient-editor/

干杯！

来源

2016-09-23 09:42:59 JoelBonetR

如何在下面的图像上设置顶部和底部的渐变颜色？

回答

相关问题