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中简单地使用您的图像作为背景图层，并将另一个图层放在顶部，然后在图像顶部创建渐变并将不透明度设置为70％左右。希望这有帮助！

2016年网站横幅的图像效果

1 个答案: