亚伦影音工作室 发表于 2025-7-26 19:53

图片边缘羽化【两种】

本帖最后由 亚伦影音工作室 于 2025-7-26 20:23 编辑 <br /><br /><style>
#tu {position: relative;
            width: 1300px;
            height:700px;
            margin: 10px 0 20px calc(50% - 740px);
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:radial-gradient(ellipse farthest-corner at center center, transparent 45%,#006400 100%),url(https://pic1.imgdb.cn/item/6844eb3b58cb8da5c83985dc.webp) no-repeat center / cover;
      }
</style>
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/cc/ad/37/97cbbb925f6fd5c932cc6f9744774259/audio.mp3" autoplay loop></audio>
<div id="tu"></div>

亚伦影音工作室 发表于 2025-7-26 20:16

背景图片

本帖最后由 亚伦影音工作室 于 2025-7-26 20:43 编辑 <br /><br /><style>
#bj {position: relative;
            width: 1300px;
            height:700px;
            margin: 10px 0 20px calc(50% - 740px);
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:radial-gradient(ellipse farthest-corner at center center, #222 35%,transparent 65%)no-repeat 900px 510px /35% 35%,url(https://pic1.imgdb.cn/item/6884c6a758cb8da5c8e23ae4.webp) no-repeat center / cover;
      }
       #tp{width: 100%;
height: 100%;
position: absolute;
top: 0px;-webkit-mask-image: radial-gradient(black 25% ,transparent 75%);
left: 0px;background:url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg)no-repeat center/cover;}
      
</style>

<div id="bj">
<div id="tp"></div>
</div>

杨帆 发表于 2025-7-26 20:39

效果惊艳！谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-7-26 20:47

和原图对照着看，这羽化效果就是十分明显呢。
感谢亚伦老师带来的好帖{:4_199:}

梦油 发表于 2025-7-26 22:47

欣赏佳作，问候亚伦。

小辣椒 发表于 2025-7-31 13:51

亚纶用代码做边缘羽化，漂亮的，其实ps分分钟搞定
页: [1]
查看完整版本: 图片边缘羽化【两种】