我需要通过 CSS、CANVAS 或 SVG 生成填充效果,这是在我拥有的 PNG 图像上执行的。
填充物可以是水平的或垂直的。它必须与图像有关。
img {
width: 300px;
height: 100px;
}
img.filtered {
filter: sepia(120%) hue-rotate(190deg) saturate(1000%) contrast(100%);
}
<img src="https://isstatic.aoverflow.com/co367.png" alt=" acío" />
<img class="filtered" src="https://isstatic.aoverflow.com/co367.png" alt="Lleno"/>
既然你告诉我它可以是水平的,你可以在图像容器中使用::before伪元素,将其放在图像下方,将其置于底部:0并使用 Css-var 参数化高度,例如示例: --liquid-height: 20%并使用 javascript 更改父元素样式行中的变量,变量如下:
如果你愿意,你可以给 before 元素一个 2 度的小旋转运动,来模拟它是一种液体,或者使用 2 个伪元素来模拟一个更真实的波浪,这里是一个带有示例的钢笔:
Codepen:仅模拟液体 css
现在我可以从上面想到两个变体:
1)不要对液体使用平面颜色,而是使用 gif 作为模拟波纹的背景。
2)您可以做的另一件事是使用画布模拟水,例如:water canvas 1 codepen和这里:water canvas 2 codepen或使用 svg,但这超出了我的知识范围。
更新
不要使用您示例的图像,因为事实证明您的图像不透明,因为它不是透明的,所以波浪永远不会在“后面”看到,但是,我给您一个示例,说明如何使用控制变量js,在这种情况下是 jquery 。
在 html 中,如果你解析它只是删除跨度,我在 css 中做了同样的事情,任何与这些相关的类(使用“box”类)都会删除它们。
看看css里面的注释,我把使一个元素放在另一个元素之上的属性,在这种情况下是z-index:N; 数字“N”越高,它就越高。
哦,添加属性 mix-blend-mode: mulitply 或 fusion mode: multiply,如果你有使用 Photoshop 的经验,它的作用是使颜色变得透明,颜色越浅或越饱和,在白色的情况下它使它完全透明,这就是我使用它的原因,但我不推荐它,最好你使用的图像是透明的,这样你就可以看到水的波浪。