前端HTML標籤影象的屬性和使用/影象img與背景background的區別
阿新 • • 發佈:2019-02-09
1 、背景屬性的作用
控制元素的背景顏色和背景影象等資訊
2、背景屬性
1、背景顏色
屬性:background-color
取值:
合法顏色值
取值為 transparent(透明)
注意:
背景顏色會從邊框的位置處開始繪製
2、背景圖片
屬性:background-image
取值:url(圖片的URL)
注意:如果 背景影象和背景顏色同時存在的話,那麼背景圖會壓在背景顏色的上面
3、背景重複
預設背景是有平鋪效果
屬性:background-repeat
取值:
1、repeat
預設值,垂直和水平方向平鋪
2、no-repeat
不平鋪,背景圖只顯示一次
3、repeat-x
僅在水平方向平鋪
4、repeat-y
僅在垂直方向平鋪
4、背景圖片尺寸
屬性:background-size
取值:
1、value1 value2
value1:寬度
value2:高度
2、value1% value2%
取決於元素的寬和高的佔比
3、cover
覆蓋,把背景圖擴充至足夠的大(等比縮放),使背景影象完全的覆蓋到元素背景區域
注意:有可能,背景圖顯示不完整
4、contain
包含,把背景圖擴充至足夠的大(等比縮放),直到背景影象的右邊或下邊碰到元素邊緣為止
5、背景圖片固定
屬性:background-attachment
取值:
1、scroll
預設值,背景會隨著文件滾動
2、fixed
固定
6、背景影象定位/位置(重難點)
屬性:background-position
取值:
1、x y
x:背景影象橫向偏移距離
取值為正,背景圖向右移動
取值為負,背景圖向左移動
y:背景圖縱向偏移距離
取值為正,背景圖向下移動
取值為負,背景圖向上移動
2、x% y%
取決於父元素寬和高的佔比
3、關鍵字
x:left/center/right
y:top/center/bottom
background-position:center;
注意:使用關鍵字時,x,y的位置可以互換
background-position:top left;
特殊使用方式:
CSS Sprites : 圖片拼合技術,將若干副小影象拼到一副大圖中。以便減少伺服器端的請求
顯示影象步驟:
1、根據要顯示的圖示大小,建立一個一樣大小的元素
利用<span>或者<b>、<i>、<a>都行,設定他們的寬高
2、將 拼合的影象作為 元素的背景,使用背景影象定位的方式 移動影象以便顯示要看的小圖
寬度:76px
高度:15px
x:-108px
y:-238px
7、背景屬性簡寫
將背景若干屬性值宣告在一個屬性中
語法:
background:color url() repeat attachment position;
注意:如果採用 background的簡寫方式的話,被省略的值將採用預設值來取代
background:red;
常用方式:
background:url() repeat position;