图片边缘虚化

最新推荐文章于 2024-05-22 09:30:33 发布

Amber.Li

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量783

点赞数

分类专栏： Ui效果文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43101443/article/details/119736024

版权

Ui效果专栏收录该内容

2 篇文章

订阅专栏

这段HTML代码展示了如何通过CSS的径向渐变作为背景，并结合图片混合模式实现独特的视觉效果。`.Test`类应用了径向渐变背景，而`.Test img`使用了`mix-blend-mode: overlay;`使得图片与背景产生叠加效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .Test{
  display: inline-block;
  width: 366px;
  height: 278px;
   /* background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); */
    background: radial-gradient(circle, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    /* background:radial-gradient(circle,red,rgb(14,27,9,1)); */
}
.Test img{
  mix-blend-mode: overlay;
}
</style>
<body>
  <div class="Test">
    <img alt="" src="http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=34480776be0e7bec238f0be51a1e950e/b3fb43166d224f4a2ded606a0ff790529822d156.jpg">
  </div>
</body>
</html>