vue项目，图片合并，png作为背景图，加上gif素材

勤勤学长 发表于 2023-2-25 18:33

图片素材（论坛不给上传压缩包）https://wwi.lanzoup.com/iU2Wo0ojukwb

说直白点，就是我有一张图片 png格式的，需要加上gif效果。最终合成一张图片。

估计我是不会搜索，找不到相关的示例代码，让chatgtp生成的，他给的代码是直接两张图片轮播的方式，显然不是我想要的效果。

求前端大佬指点
{:1_893:}

sowav 发表于 2023-2-25 18:58

PS就可以实现。
但Fireworks操作更容易些，打开背景png文件，然后导入GIF文件，再导出为GIF动画文件就OK了。

https://wwzv.lanzoue.com/iIhy20ok01vc

lcbreak 发表于 2023-2-25 20:46

这个要么就像楼上说的就直接用图片制作工具直接合成一张gif，或者一个div里面再套一个img标签，应该符合你的要求。

<style>
   .box {
         width: 240px;
         height: 240px;
         background-image: url(./111.png);
         background-size: cover;
   }

   .img {
         background-image: url(./11.gif);
         background-size: cover;
         width: 240px;
         height: 240px;
   }
</style>

<body>
<div class="box">
   <div class="img"></div>
</div>
</body>

zxh1231 发表于 2023-2-25 21:32

很好很强大

d199212 发表于 2023-2-28 11:27

要么搞个gif，要么2张图片写个过渡动画循环展示

contest 发表于 2023-3-6 10:49

我也是初学前端，根据我现在的前端的一点知识来说，想要实现你的目标，可以按照3楼说的方法来，然后关于div嵌套div、img标签，再精细写的话，可以加入定位position、z-index图层的css

勤勤学长 发表于 2023-3-10 14:30

contest 发表于 2023-3-6 10:49
我也是初学前端，根据我现在的前端的一点知识来说，想要实现你的目标，可以按照3楼说的方法来，然后关于div ...

重点是两张图片合并，字面上的合并。不是视觉效果。

jackrebel 发表于 2023-3-27 10:49

页: [1]

吾爱破解 - 52pojie.cn's Archiver

vue项目，图片合并，png作为背景图，加上gif素材