標籤：char doc 代碼 連結 pad meta 滑鼠 比例 utf-8
一、背景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二、雪碧圖1.詞條解釋 CSS Sprite，也有人叫它CSS精靈，是一種CSS映像合并技術，該方法是將小表徵圖和背景映像合并到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。2.原理 CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。3.代碼舉例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><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><title>雪碧圖</title></head><body><div></div><div id="div2"></div><div id="div3"></div></body></html>三、超連結的偽類樣式1.未訪問狀態 a:link{ color: blue; }2.已訪問狀態 a:visited{ color: darkgrey; }3.滑鼠懸浮狀態 a:hover{ color: red; }4.滑鼠啟用選定狀態 a:active{ color: yellow; }CSS中的背景、雪碧圖、超連結的偽類樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
