CSS中的背景、雪碧圖、超連接的僞類樣式

時間 2019-11-11

標籤 css 背景雪碧連接樣式欄目 CSS 简体版

原文原文鏈接

1、背景

1.背景顏色

　　background-color: red;

2.背景圖片

　　background-image: url("../../img/l1.png");

3.圖片填充

　　background-repeat: no-repeat;（有這三個經常使用的屬性值： no-repeat、repeat-x、repeat-y）

4.背景圖片大小

　　background-size:100% 100%；

　　　　cover（覆蓋）:（先讓圖片水平填滿容器）圖片等比例縮放，直到最小部分填滿容器有可能會出現圖片顯示不全的效果。

　　　　contain（包含）：（先讓圖片垂直填滿容器）圖片也是等比例縮放，直到最大部分填滿容器有可能出現圖片覆蓋不完整。

　　　　100% 100%：讓圖片水平垂直都恰好填滿容器致使圖片被拉伸或壓縮。

5.背景圖片位置

　　background-position: bottom right;

　　　　當只指定x或y中的一個方向時，另一個方向默認是居中效果；一樣它也能夠有數值

6.背景圖片的開始位置

　　background-origin: padding-box;

　　　　border-box：從外邊框出開始顯示

　　　　padding-box：從內邊距開始

　　　　content-box：從內容處開始*/

7.背景圖片剪切位置

　　background-clip: content-box;

8.背景的複合屬性

　　background: red url("../../img/j.png") no-repeat 20px 20px;

　　　　它結合了這四個屬性background-color、 background-image、background-repeat、 background-position

2、雪碧圖

1.詞條解釋

　　CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

2.原理

　　　CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。

3.代碼舉例

<!DOCTYPE html>

<head>

<style>

div{

height: 28px;

width: 28px;

/**/

background-repeat: no-repeat;

background-image: url("../../img/q.gif");

}

#div2{

background-position: -85px 0;

}

#div3{

background-position: -163px -30px;

}

</style>

</head>

<body>

</body>

</html>

3、超連接的僞類樣式

1.未訪問狀態

　　a:link{ color: blue; }

2.已訪問狀態

　　a:visited{ color: darkgrey; }

3.鼠標懸浮狀態

　　a:hover{ color: red; }

4.鼠標激活選定狀態

　　a:active{ color: yellow; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。