HTML CSS (7) - 操作背景圖片

• 置入背景圖片
• 可使用background-image:url(相對路徑或絕對路徑)

.box{
 width: 200px;
 height: 200px;
 background-image: url("../img/rabbit.png")//注意目前位置在css資料夾
}

預設會重複

• 當圖片很大的時候，下載速度會變慢，因此可以把重複的圖片讓他切割成小塊
• 重複方式
• 設定長寬
• background-repeat: repeat-x(x軸重複)/background-repeat: repeat-y(y軸重複);
• 不重複
• background-repeat: no-repeat;

使用小塊製成下圖

若只使用repeat會造成色塊重疊，顏色不均

使用滴管功能擷取最下層的顏色，可得到色碼

並加入下面css，加上background-color: #1a45b0;

.box{
 width: 2000px;
 background-image: url("../img/foot.png");//小圖片
 background-repeat: repeat-x; //圖片只有repeat x軸
 background-color: #1a45b0;//吸取最下層的圖片顏色代碼
}

成功！

順序：background image圖片在上，background color顏色在下

• 圖片位置

.box{
 width: 500px;
 height: 200px;
 background-image: url("../img/rabbit.png");
 background-repeat: no-repeat;
 background-color: pink;
 background-position: left bottom; // x軸 y軸
 background-position: 90% 90%;
}

• position: 可以設定百分比或是從left/right bottom/top ，設定背景圖片的位置

• 縮寫方式：

background-image: url("../img/rabbit.png");
background-repeat: no-repeat;
background-color: pink;
background-position: right  bottom;

background: url("../img/rabbit.png") no-repeat pink left bottom; 

// 縮寫成一行，位置可以變動

• 讓圖片代替文字
• 讓ul li內能夠出現文字

HTML

<div class="header">
    <h1>
 <a href="#">About</a>
    </h1>
</div>

CSS

.header{
 float: left;
}

.header h1 a{
 background: url("http://chibimaru.tv/common/images/header_nav_04_off.jpg");
 display: block;
 width: 180px;
 height: 65px;
 /* 隱藏字 */
 text-indent: 101%; // 縮排
 overflow: hidden; // 超過的部分隱藏
 white-space: nowarp; // 不斷行
}

即可讓文字隱藏，以圖片代替文字

完成作品

• 步驟
1. 分兩個區塊，header，menu
2. header內有一個bar 裡面有 ul li，li內有a超連結並嵌入圖片
3. menu內有圖片，右邊也有ul li