透明背景
opacity可以用來設置元素背景的透明，
- 它需要一個0-1之間的值
- 0 表示完全透明
- 1 表示完全不透明
- 0.5 表示半透明
opacity屬性在IE8及以下的瀏覽器中不支持，IE8及以下的瀏覽器需要使用如下屬性代替,這種方式支持IE6
- alpha(opacity=透明度)，透明度，需要一個0-100之間的值
- 0 表示完全透明
- 100 表示完全不透明
- 50 半透明
.box{
opacity: 0.5;
filter: alpha(opacity=50);
}
背景圖片
background-color設置背景顏色
background-image來設置背景圖片
如果背景圖片大於元素，默認會顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
- 如果背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素
可以同時爲一個元素指定背景顏色和背景圖片，這樣背景顏色將會作爲背景圖片的底色， 一般情況下設置背景圖片時都會同時指定一個背景顏色,background-repeat用於設置背景圖片的重複方式，可選值：
- repeat，默認值，背景圖片會雙方向重複（平鋪）
- no-repeat ，背景圖片不會重複，有多大就顯示多大
- repeat-x， 背景圖片沿水平方向重複
- repeat-y，背景圖片沿垂直方向重複
導航條上的漸變色可以截取背景圖片
可以截取一個像素的豎條，然後使用背景進行平鋪
.box1{
width: 990px;
height: 32px;
background-color: #bfa;
margin: 50px auto;
/*
* 設置爲背景圖片
*/
background-image: url(img/bg.gif);
/*
* 設置水平方向重複
*/
background-repeat: repeat-x;
}
背景圖片默認是貼着元素的左上角顯示通過background-position可以調整背景圖片在元素中的位置
可選值:top right left bottom center中的兩個值 來指定一個背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個值，則第二個值默認是center
也可以直接指定兩個偏移量， 第一個值是水平偏移量
- 如果指定的是一個正值，則圖片會向右移動指定的像素
- 如果指定的是一個負值，則圖片會向左移動指定的像素
第二個是垂直偏移量
- 如果指定的是一個正值，則圖片會向下移動指定的像素
- 如果指定的是一個負值，則圖片會向上移動指定的像素
{
background-repeat: no-repeat;
background-position: -80px -40px;
}
background-attachment用來設置背景圖片是否隨頁面一起滾動
可選值：
scroll，默認值，背景圖片隨着窗口滾動
fixed，背景圖片會固定在某一位置，不隨頁面滾動
{
background-attachment:fixed;
}
當背景圖片的background-attachment設置爲fixed時，背景圖片的定位永遠相對於瀏覽器的窗口
不隨窗口滾動的圖片，我們一般都是設置給body，而不設置給其他元素
按鈕練習
圖片資源
active.png
hover.png
link.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn:link{
/*將a轉換爲塊元素*/
display: block;
/*設置寬高*/
width: 93px;
height: 29px;
/*設置背景圖片*/
background-image: url(img/btn/link.png);
/*設置背景圖片不重複*/
background-repeat: no-repeat;
}
.btn:hover{
background-image: url(img/btn/hover.png);
}
.btn:active{
background-image: url(img/btn/active.png);
}
</style>
</head>
<body>
<a class="btn" href="#"></a>
</body>
</html>
做完功能以後，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的用戶體驗。
產生問題的原因：
背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就需要單獨的發送一次請求，但是我們外部資源並不是同時加載，瀏覽器會在資源被使用纔去加載資源
我們這個練習，一上來瀏覽器只會加載link.png由於hover和active的狀態沒有馬上觸發，所以hover.png和active.png並不是立即加載的當hover被觸發時，瀏覽器纔去加載hover.png當active被觸發時，瀏覽器纔去加載active.png
由於加載圖片需要一定的時間，所以在加載和顯示過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況
爲了解決該問題，可以將三個圖片整合爲一張圖片，這樣可以同時將三張圖片一起加載，就不會出現閃爍的問題了，
然後在通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite）
優點：
1 將多個圖片整合爲一張圖片裏，瀏覽器只需要發送一次請求，可以同時加載多個圖片，提高訪問效率，提高了用戶體驗。
2 將多個圖片整合爲一張圖片，減小了圖片的總大小，提高請求的速度，增加了用戶體驗
btn.png
<style type="text/css">
.btn:link{
/*將a轉換爲塊元素*/
display: block;
/*設置寬高*/
width: 93px;
height: 29px;
/*設置背景圖片*/
background-image: url(img/btn/btn2.png);
/*設置背景圖片不重複*/
background-repeat: no-repeat;
}
.btn:hover{
/*
* 當是hover狀態時，希望圖片可以向左移動
*/
background-position: -93px 0px;
}
.btn:active{
/*
* 當是active狀態時，希望圖片再向左移動
*/
background-position: -186px 0px;
}
</style>
同時設置背景屬性
background
- 通過該屬性可以同時設置所有背景相關的樣式
- 沒有順序的要求，誰在前睡在後都行，也沒有數量的要求，不寫的樣式就使用默認值
body{
height: 5000px;
/*設置一個背景顏色*/
/*background-color: #bfa;*/
/*設置一個背景圖片*/
/*background-image: url(img/3.png);*/
/*設置背景不重複*/
/*background-repeat: no-repeat;*/
/*設置背景圖片的位置*/
/*background-position: center center;*/
/*設置背景圖片不隨滾動條滾動*/
/*background-attachment: fixed;*/
background-color: #bfa;
background: #bfa url(img/3.png) center center no-repeat fixed;
}
雪碧圖
使用雪碧圖
1、量想要使用圖標的大小，設置寬高
.box1{
width: 129px;
height: 45px;
background-image:url(img/amazon-sprite_.png) ;
}
2、量所需圖標到左上角的距離，設置偏移量
{
background-position: -58px -338px;
}
製作雪碧圖
使用ps製作雪碧圖
1、增加畫布大小
2、把其他圖片複製到畫布