如何在网站 header/hero 上创建非矩形图像？

Question

我正在创建一个小型网站，我想在主要图像上尝试使用现代非矩形图像方法，但我不确定如何着手it.Here 是我的一个例子非常感谢我 achieve.Any 指导。

Answer 1

我不确定为什么你会收到这么多反对票，但我知道解决办法。要实现此类设计，您需要使用 SVG。可缩放矢量图形 (SVG) 是 HTML 中的一个元素，用于绘制复杂的路径，但许多人使用在线工具或程序（如 GIMP、Adobe Illustrator 或 Inkscape）来制作它们。您在程序中绘制它们并将路径数据导出到您的 HTML 文档。我希望这对您和您不断发展的网站有所帮助。 https://inkscape.org/ -- 墨景 https://www.gimp.org/ -- GIMP

Answer 2

在图片上使用png遮罩图像。

https://i.stack.imgur.com/ReAR9.png

.wrap {position:relative;width:969px;height:300}
.wrap .bg {height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover}
.wrap .mask {position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0}

<div style="width:969px;margin:0 auto">
  <div class="wrap">
    <div class="bg"></div>
    <div class="mask"></div>
  </div>
  <div>
    Content
  </div>
</div>

Answer 3

一个很好的方法是使用 SVG 剪切路径。这个网站在这里允许你创建你想要的路径然后它会自动生成你需要创建它的CSS。

https://bennettfeely.com/clippy/

如何在网站 header/hero 上创建非矩形图像？

How do you create non rectangular shaped image on website header/hero?

html

css

svg

photoshop

adobe-illustrator