【问题标题】:SVG header cropping a bitmap - but with responsivinessSVG 标头裁剪位图 - 但具有响应性
【发布时间】:2019-12-26 00:15:16
【问题描述】:

我正在尝试在具有以下效果的网站中创建标题:

我的想法是将示例图像的中心保持在较小的屏幕中(红色指南表示此屏幕侧)。除此之外,位图会像渐变一样消失在侧边框上。

对如何使用 HTML、SVG 和 CSS 完成此任务有任何帮助吗?

【问题讨论】:

    标签: html css svg bitmap


    【解决方案1】:

    我最终采用了不同的方法来实现相同的结果。 我没有尝试裁剪图像,而是创建了一个白色波浪并在图像上使用它。

    这是一个小的工作代码(它在 React 中,但很容易看到 CSS/HTML 部分): https://codesandbox.io/s/header-cropped-vnlr0

    【讨论】:

      猜你喜欢
      • 2016-09-19
      • 2013-03-15
      • 2019-05-10
      • 1970-01-01
      • 1970-01-01
      • 2016-09-10
      • 2016-04-08
      • 2017-07-31
      • 2014-04-30
      相关资源
      最近更新 更多