1.12 图片

• 响应式图片
• 滤镜
• 图片文本相对定位

响应式图片

<img style="max-width: 100%;height: auto" src="icon.png" width="1000" height="300">

滤镜

<img style="filter: blur(4px);filter: blur(4px);" src="icon.png" width="300" height="300">

none            默认值，没有效果

blur(px)        给图像设置高斯模糊

brightness(%)   明暗

contrast(%)     对比度

drop-shadow(h-shadow v-shadow blur spread color) 阴影 
grayscale(%)    灰度

hue-rotate(deg) 色相旋转

invert(%)       反转图像

opacity(%)      透明度

saturate(%)     饱和度

sepia(%)        深褐色

url()           URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

initial         设置属性为默认值

inherit         从父元素继承该属性

图片文本相对定位

• 只是个示例；

<div style="position: relative;">
    <img style="max-width: 100%;height: auto" src="icon.png" width="300" height="300">
    <div style="position: absolute;bottom: 8px;">
        图片描述
    </div>
</div>