1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
將一些零碎的圖片整合到一起,這樣在加載網頁時候可以省去多次請求的時間.一般用于頁面上的多個icon圖標的整合,使用恰當的background-position進行定位.
2.img標簽和CSS背景使用圖片在使用場景上有何區(qū)別?
<img>寫在html的文件中,用于展示圖片或者承接鏈接,為可替換元素.
css背景使用圖片是一種背景展現的方式,用于頁面上圖標的展示.
3.background: url(abc.png) 0 0 no-repeat;這句話是什么意思?
background
4.background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性規(guī)定背景圖像的尺寸.
background-size
常用值
| value | 釋義 |
|---|---|
<length> |
設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 |
<percentage> |
以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 |
<auto> |
以背景圖片原始大小縮放背景 |
<cover> |
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
<contain> |
將背景圖片放大至完全填充背景區(qū)域. |
5.如何讓一個div水平居中？如何讓圖片水平居中?
margin:0px auto讓一個div水平居中.多數用于使整個內容區(qū)居中與頁面.
運用此方法時,一定要先定義div的寬度.
圖片居中也可以使用這個方法.
6.如何設置元素透明? 兼容性？
通過rgba和opacity
opacity兼容性
Paste_Image.png
rgba兼容性
Paste_Image.png
opacity 設置透明度會使子元素也透明,有繼承性,作用于元素，以及元素內的所有內容的透明度.
rgba 設置透明度沒有繼承性 只作用于元素的顏色或其背景色
