### **圖片固定比例** * 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 瀏覽器支持