html如何让图片边缘模糊化,如何使用css滤镜获得图像:模糊和锐利的边缘?

我所知道的技术,很好地解释了

http://demosthenes.info/blog/534/Crossbrowser-Image-Blur:

1 ..如果在所有外边缘上有一个具有相同颜色的图像,如上例所示,您可以将主体或容器元素的背景颜色设置为相同的颜色. (仅供参考;不适用于你,至少不适合你的小提琴).

2 ..使用clip属性修剪图像的边缘.剪辑始终按以下顺序说明:

clip:rect(顶部,右侧剪辑偏离左侧,底部偏离顶部,左侧)

对于上面的示例,图像宽367像素×459像素高,模糊2像素,因此剪辑将表示为:

clip:rect(2px,365px,457px,2px);

(请注意,剪辑仅应用于具有位置的元素:绝对应用于它们.如果您想在IE8及更早版本中获得支持,请记住将px放在值的末尾). (不知道你是否在堆叠,网格或只是标注中布置照片等.如果你可以吞下绝对定位,这可能是合适的.)

3 ..将图像包含在略小于图像的包含元素(例如a)中,将溢出:隐藏到外部元素并向左移动图像并略微向上移动以消除这些边缘上的可见模糊.

此外,在图像周围抛出边框似乎至少在Webkit中有所帮助,但我还没有对它进行过广泛的测试.

.item img{

transition:all .5s ;

border:1px solid #000;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值