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

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

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

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

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

求前端大佬指点

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标签，应该符合你的要求。

[HTML] 纯文本查看 复制代码

 <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

提示: 作者被禁止或删除内容自动屏蔽

帐号		自动登录	找回密码
密码			注册[Register]

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

免费评分

jackrebel jackrebel 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	jackrebel 发表于 2023-3-27 10:49 提示: 作者被禁止或删除内容自动屏蔽

	回复举报