css之图片羽化处理

最新推荐文章于 2024-04-11 15:07:58 发布

最新推荐文章于 2024-04-11 15:07:58 发布 · 1.7k 阅读

J2ee 专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现图片羽化效果的方法。通过在图片上叠加一个带有内阴影的绝对定位div元素来达到羽化的效果。这种方法简单且易于实现。

需求：

对图片做css羽化处理

实现：

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="Generator" content="EditPlus&reg;" /> 
  <meta name="Author" content="" /> 
  <meta name="Keywords" content="" /> 
  <meta name="Description" content="" /> 
  <title>Document</title> 
 </head> 
 <body> 
  <img style="display: block;  height: 100%;width: 100%;" src="http://js.linkrmb.com/mt.jpg" /> 
  <div style="  
position: absolute;
top: 0;
height: 100%;
width: 100%;
box-shadow: 0 0 70px 30px rgb(249, 249, 249) inset;"></div>   
 </body>
</html>

效果：