只能用CSS来实现图片渲染效果

前言要实现图片高亮效果等特效，就不得不提到CSS3的filter属性。CSS滤镜是一个强大的工具，可以用来实现不同的视觉效果（有点像浏览器的Photoshop滤镜）。CSSfilter属性提供了一些效果，例如在显示元素之前对元素的呈现进行模糊处理或颜色偏移。滤镜通常用于调整图像、背景或边框的渲染。浏览器支持：只有IE浏览器不支持过滤（filter）属性，为了兼容低版本的safari和google浏览器，需要添加前缀-webkit-。使用语法过滤器：无|模糊（）|亮度（）|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度（）|饱和（）|棕褐色（）|网址（）；title属性引入了一个默认值none，它没有任何作用。blur(px)为图像设置高斯模糊。“radius”的值设置了高斯函数的标准差，也就是屏幕上有多少像素混合在一起，所以值越大越模糊；如果没有设置值，默认为0；这个参数可以设置css长度值，但是不接受Percentage值。brightness(%)对图像应用线性乘法，使其看起来更亮或更暗。如果该值为0%，则图像将完全变黑。值为100%不会导致图像发生任何变化。其他值对应线性乘数效应。值超过100%也可以，图像会比原始图像更亮。如果没有设置值，默认为1。contrast(%)调整图像的对比度。值为0%时，图像将完全变黑。值为100%时图像保持不变。值可以超过100%，这意味着将应用较低的对比度。如果没有设置值，默认为1。drop-shadow(h-shadowv-shadowblurspreadcolor)为图像设置阴影效果。阴影是在图像下方合成的遮罩的偏移版本，可选择使用模糊，并以特定颜色绘制。函数接受类型的值（定义在CSS3后台），除了“inset”关键字是不允许的。该功能与现有的box-shadowbox-shadow属性非常相似；不同之处在于，通过过滤器，一些浏览器提供硬件加速以获得更好的性能。参数如下：(required)这是设置阴影偏移量的两个值。设置水平方向的距离。负值会使阴影出现在元素的左侧。设置垂直距离。负值使阴影出现在元素上方。查看的可能单位。如果两个值都为0，则阴影直接出现在元素后面（如果设置了和/或，则具有模糊效果）。（可选）这是第三个代码<长度>值。值越大越模糊，阴影会变大变淡。不允许负值。如果未设置，默认值为0（阴影的边框非常锐利）。（可选）这是第四个值。正值会使阴影扩散变大，负值会使阴影缩小。如果未设置，默认值为0（阴影将与元素大小相同）。注意：Webkit和其他一些浏览器不支持第四个长度，添加后不会呈现。（可选）有关此值的可能关键字和标签，请参阅。如果未设置，则颜色值基于浏览器。在Gecko(Firefox)、Presto(Opera)和Trident(InternetExplorer)中，应用了colorcolor属性的值。此外，如果省略颜色值，则阴影在WebKit中是透明的。grayscale(%)将图像转换为灰度图像。该值定义转换的比例。值为100%将完全转换为灰度图像，值为0%则不会改变图像。0%到100%之间的值是效果的线性乘数。如果不设置，则值默认为0；hue-rotate(deg)对图像应用色调旋转。“角度”值设置图像将被调整的色环角度。0deg值表示图像没有变化。如果未设置该值，则默认值为0deg。这个值虽然没有最大值，但是超过360deg的数值就相当于又绕了一圈。invert(%)反转输入图像。该值定义转换的比例。值为100%表示完全反转。值为0%时图像保持不变。0%到100%之间的值是效果的线性乘数。如果未设置该值，则该值默认为0。opacity(%)转换图像的透明度。该值定义转换的比例。值为0%时完全透明，值为100%时图像保持不变。介于0%和100%之间的值是效果的线性乘数，也相当于乘以图像样本数。如果不设置该值，则该值默认为1。这个功能和现有的opacity属性很相似，不同的是通过filter，一些浏览器会提供硬件加速来提高性能。saturate(%)转换图像饱和度。该值定义转换的比例。值为0%表示完全去饱和，值为100%时图像保持不变。其他值是效果的线性乘数。允许超过100%的值，具有更高的饱和度。如果未设置该值，则该值默认为1。sepia(%)将图像转换为棕褐色。该值定义转换的比例。值为100%时完全呈棕褐色，值为0%时图像保持不变。0%到100%之间的值是效果的线性乘数。如果不设置，则值默认为0；url()URL函数接受一个XML文件，它设置了一个SVG过滤器，并且可以包含一个锚点来指定一个特定的过滤器元素。例如：filter:url(svg-url#element-id)CSSfilters可以同时为同一个元素定义多个CSS滤镜，比如filter:contrast(150%)brightness(1.5)，但是效果不同过滤器的顺序也不同；默认值为：initialinherit表示从父级继承。注意：过滤器通常使用百分比（如：75%），当然也可以用小数来表示（如：0.75）。代码演示Demo地址：https://codepen.io/zengguanba...参考资源https://www.runoob.com/cssref...https://css-tricks.com/almana...