2016 年网站横幅的图像效果

Question

我一直在搜索这个图像效果的名称，但找不到答案，因为我真的不知道在搜索引擎上放什么。所以我决定访问这里 post 向你们提问，希望我能得到答案。这是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 年网站横幅的图像效果

Image Effects of 2016 for Website Banner

html

css

photoshop

image