Html 2016年网站横幅的图像效果

我一直在搜索这个图像效果的名称，但找不到答案，因为我真的不知道在搜索引擎上放什么。所以我决定访问这里，向你们发布一个问题，希望我能得到答案。这是一种称为渐变的效果，有人将半透明渐变叠加在图像顶部

您可以使用HTML/CSS实现这一点。

HTML将如下所示：

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

---

你也可以在photoshop中简单地实现这一点，将你的图像作为背景层，然后在上面放置另一层，然后在图像的顶部生成一个渐变，并将不透明度设置为70%左右。希望这有帮助

你是说img上面的“颜色”效果？。搜索为“Img布局css”。是的，图像上方的颜色。我想知道那个效果的名字是什么。所以我可以搜索一个关于它的教程。梯度和模糊我想？是的，再看一遍，它肯定也有一点模糊。你可以用CSS或者Photoshop来实现。CSS:

img{-webkit过滤器：模糊（5px）；过滤器：模糊（5px）；}

#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 */
}