【凡哥教程第四讲作业】时光（元素复制及定位练习）

清梦

清梦

完成作业，谢谢凡哥老师和静静

花简静

清梦 发表于 2024-7-25 09:22
完成作业，谢谢凡哥老师和静静

哇，这个把图片元素换成了动图，位置设得非常准确，好棒的作品

清梦

花简静 发表于 2024-7-25 10:18
哇，这个把图片元素换成了动图，位置设得非常准确，好棒的作品

谢谢静静的鼓励，仿佛回到了学生时代，静静就像一位尽职尽着的好老师，我都怀疑静静是不是真的是老师啊

花简静

清梦宝贝：你加的这个动图有点白色的边，加一个滤镜 mix-blend-mode: multiply;可以去掉（这个是正片叠底，去白留黑用的）

.mypic {
        position: absolute; /* 绝对定位 */
        width: 160px;
        height: 160px;
        mix-blend-mode: multiply;

把红色部分的代码的复制到这个位置就可以了

花简静

mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底 （常用，去白底留黑底。视频也适用）
mix-blend-mode: screen; //滤色 （常用，去黑底留白底。视频经常使用）
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原

扬帆

清梦 发表于 2024-7-25 10:21
谢谢静静的鼓励，仿佛回到了学生时代，静静就像一位尽职尽着的好老师，我都怀疑静静是不是真的是老师啊 ...

应该是真的，她显然具备一个优秀老师的潜质哇~

扬帆

花简静 发表于 2024-7-25 10:23
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底 （常用，去白底留黑底。视频也适 ...

花简静版主辛苦了，谢谢分享~

柒玥

清梦太聪明了，欣赏学习！

柒玥

问好清梦，谢谢你的精彩分享，祝学习快乐！