1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
把背景圖合并成一張大圖,通過background-position定位圖片,當打開頁面時只需加載一次這張大圖,從而減少網絡請求。
2.img標簽和CSS背景使用圖片在使用場景上有何區別?
img標簽用于經常變動的圖片,如頭像。
css背景用于固定不變的圖片,如圖標。
3.title和 alt屬性分別有什么作用?
title:
(1)可以放在<title></title>之間來顯示網頁的標題
(2)為鏈接添加描述性文字,就是當鼠標放到圖片上時會顯示title屬性里面的內容,以達到補充說明或者提示的效果。而且對于seo沒什么作用。
title的作用
alt:
(1)用來指定替換文字,對圖片起到一個注釋的作用,它只能用在img、area和input元素中(包括applet元素)。用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息。
(2)利于seo的作用
alt的作用
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思?
背景圖片引入的地址為abc.png,在水平方向和垂直方向不偏移,而且背景圖片不重復。
5.background-size有什么作用? 兼容性如何? 常用的值是?
作用:設置背景圖片的固定尺寸來展示
常用的值:length、percentage、cover、contain
兼容性
6.如何讓一個div水平居中?如何讓圖片水平居中?
div水平居中:
設置margin: 0 auto;
圖片水平居中:
(1)給圖片添加一個父容器,在圖片的父容器上設置text-align: center;
(2)設置display: block; margin: 0 auto;
7.如何設置元素透明? 兼容性?
opacity:0~1; filter:alpha(opacity=50)
background:rgba(255,0,0,0~1)
opacity兼容性
rgba的兼容性
8.opacity和 rgba都能設置透明,有什么區別
opacity:作用于元素,以及元素內的所有內容的透明度
rgba:只作用于元素的顏色或其背景色