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

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/