2016年网站横幅的图像效果

Question

我一直在寻找这个图像效果的名称，但无法找到答案，因为我真的不知道应该放在搜索引擎上。所以我决定访问这里向你们发布一个问题，希望我能得到答案。这是image effect

Answer 1

该效果称为渐变，某人在图像顶部覆盖半透明渐变。

你可以用HTML/CSS做到这一点。 Gradients in CSS

You'll need to check this out to get the gradients to be transparent though

的HTML会是这个样子：

<div id="container> 
    <img src="path/to/img.jpg"> 
    <div id="gradient"/> 
</div> 

和你的CSS可能是什么样子的例子可能是：

#container { 
    position: relative; 
} 

#container img { 
    width: 100%; 
} 

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    /* note: this CSS has gradients but to make them transparent check out the link I sent above */ 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow); /* Standard syntax */ 
} 

你也可以做它只需在photoshop中，将图像用作背景图层，然后将另一图层放在顶层，然后制作一个图层t在图像上方，并将不透明度设置为70％左右。希望这可以帮助！