作者:phpyi | 来源:互联网 | 2023-05-24 17:55
我有一个简单的CSS相关问题.如何获得图像中所示的右端模糊/淡入淡出?
![在此输入图像描述](https://img.php1.cn/3cd4a/1eebe/cd5/5287a7b3296ea13e.webp)
1> misterManSam..:
两种方法
让我们这样做:
![截图](https://img.php1.cn/3cd4a/1eebe/cd5/c72d78d7317a9e8e.webp)
1.使用box-shadow
浏览器兼容性: IE 9 +用于盒子阴影.
box-shadow
在div中放置适当的插图
div被赋予左边距以使其背景的白色部分与文本对齐(box-sizing: border-box
基本上将填充吸收到宽度中)
Box-shadow示例
div {
background: url(http://lorempixel.com/output/food-q-c-500-500-8.jpg) no-repeat;
height: 500px;
width: 500px;
border: solid 1px #000;
padding-left: 300px;
box-sizing: border-box;
box-shadow: inset -250px 0 50px 10px #FFF;
}