在SVG中使用WebP作为背景图像

jBoive

因此,我想做与HTML相同或相似的工作:

   <picture>
      <source type="image/webp" srcset="my-image.webp">
      <img src="my-image.jpg">
   </picture>

但是,显然这是行不通的:

   <svg>
      <picture>
         <source type="image/webp" srcset="my-image.webp">
         <img src="my-image.jpg">
      </picture>
   </svg>

我可以使用.htaccess方法,但由于302 HTTP重定向,我不希望这样做。

该解决方案还需要在没有任何JavaScript技巧的情况下工作...

jBoive

由于罗伯特·朗森(Robert Longson)的意见,这就是我最终要做的事情:

<foreignObject x="0" y="0" width="100%" height="100%">
                <picture>
                    <source width="1180" height="500" type="image/webp" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=webp&text=webp@1x&texture=graphpaper&delay=2g 1x,
                 http://satyr.io/2360x1000?type=webp&text=webp@2x&texture=graphpaper&delay=2g 2x"/>
                    <source width="1180" height="500" type="image/jpeg" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=jpg&text=jpg@1x&texture=graphpaper&delay=2g 1x,
                 http://satyr.io/2360x1000?type=jpeg&text=jpeg@2x&texture=graphpaper&delay=3g 2x"/>
                    <img width="1180" height="500" class="lazyload"
                         data-src="http://satyr.io/1180x500?2&type=jpeg&text=jpeg@1x&texture=graphpaper&delay=3g" alt=""/></picture>
            </foreignObject>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

SVG作为背景图像

来自分类Dev

SVG作为背景图像

来自分类Dev

在缩放的svg中使用栅格图像作为平铺背景

来自分类Dev

使用img src作为背景图像

来自分类Dev

如何在媒体查询中使用 API 返回的图像作为背景图像?

来自分类Dev

如何在媒体查询中使用 API 返回的图像作为背景图像?

来自分类Dev

使用SVG作为背景图像时,未渲染嵌入式<image>

来自分类Dev

在PHP中使用背景图像

来自分类Dev

在玉器中使用背景图像

来自分类Dev

在PHP中使用背景图像

来自分类Dev

SVG条纹图案作为元素背景图像

来自分类Dev

Polymer SVG作为CSS背景图像不起作用

来自分类Dev

如何获得内联SVG代码作为背景图像?

来自分类Dev

带有掩码的SVG作为HTML元素的背景图像

来自分类Dev

SVG条纹图案作为元素背景图像

来自分类Dev

Polymer SVG作为CSS背景图像不起作用

来自分类Dev

如何在符号标签中使用SGV作为背景图像

来自分类Dev

在我的 Angular 应用程序中使用 api 调用值作为 div 的背景图像

来自分类Dev

使用SKSPriteNode作为背景图像时FPS低

来自分类Dev

如何使用CSS将文本颜色作为背景图像?

来自分类Dev

WebGL –使用网格作为背景图像的遮罩

来自分类Dev

如何使用字体图标作为背景图像?

来自分类Dev

在Java中使用图像作为背景

来自分类Dev

Base64 编码的 SVG 图像作为背景图像 CSS 属性

来自分类Dev

在Konva图层或舞台中使用背景图像

来自分类Dev

Java中使用JFrame的窗口的背景图像

来自分类Dev

在 pygame 窗口中使用背景图像

来自分类Dev

如何在 div 中使用背景图像?

来自分类Dev

SVG作为Div的嵌入式背景图像不起作用

Related 相关文章

热门标签

归档