### **图片固定比例** * padding方案 ~~~ .img-container{width: 100%;height: 0;/* 图片的高宽比 */padding-bottom: 66.620879%;} ~~~ ### **解决图片5px间距** * 方案1：给父元素设置`font-size: 0` * 方案2：给img设置`display: block` * 方案3：给img设置`vertical-align: bottom` * 方案4：给父元素设置`line-height: 5px;` ### 背景附着 #### **background-attachment** >**background-attachment属性指定背景图像是应该滚动还是固定的。** > `fixed: `指定应该固定背景图像。 > `scroll: `指定背景图像应随页面的其余部分一起滚动。 ****** ### CSS:filter >CSS 滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 ~~~ // URL to SVG filter filter: url("filters.svg#filter-id"); // <filter-function> values filter: blur(0px); // 高斯模糊 filter: brightness(100%); // 线性乘法，使图片看起来更亮或更暗 filter: contrast(100%); // 对比度 filter: drop-shadow($offset-x $offset-y $blur $spread $color); // 阴影，相似于 box-shadow filter: grayscale(0%); // 转换为灰度图像 filter: hue-rotate(0deg); // 色相旋转 filter: invert(0%); // 反转输入图像 filter: opacity(100%); // 不透明度 filter: saturate(100%); // 转换图像饱和度 filter: sepia(0%); // 将图像转换为深褐色，暖色调 // Multiple filters filter: contrast(100%) brightness(100%); // Global values filter: inherit; filter: initial; filter: unset; ~~~ #### 实例 ~~~ // gray all images by 50% and blur by 10px img { filter: grayscale(0.5) blur(10px); } ~~~ #### CSS:filter 浏览器支持