如何在网站标题/英雄上创建非矩形图像？

Question

我正在创建一个小型网站，我想在英雄图像上试验现代非矩形图像方法，但我不知道如何去做。这是我想要实现的一个例子。任何指导将受到高度赞赏。

Answer 1

我不确定你为什么收到这么多的选票，但我知道解决方案。要实现类似设计的类型，您需要使用SVG。可缩放矢量图形（SVG）是HTML中用于绘制复杂路径的元素，但是许多人使用GIMP，Adobe Illustrator或Inkscape等在线工具制作它们。您在程序中绘制它们并将路径数据导出到HTML文档。我希望这可以帮助您和您不断增长的网站。 https://inkscape.org/ - Inkscape 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/