[Web 前端] 011 css 背景屬性
阿新 • • 發佈：2019-05-02
center ack 是否 set col image sta 背景圖片 eight
1. 概覽
| 參數 | 釋義 |
|---|---|
| background-color | 背景顏色 |
| background-image | 背景圖片 |
| background-repeat | 是否重復 |
| background-position | 定位 |
| background-size（css3 的屬性） | 背景大小 舉例：background-size:100px 140px; |
2. 舉例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="./static/CSS/test.css"> </head> <body> <div> <p class="box1"> 001 <br> </p> <p class="box2"> 002 <br> </p> </div> </body> </html>
*{ width: 400px; height: 240px; } .box1{ background-color: #b35e59; background-image: url(../img/pic2.jpg); /* 註：此圖 200X120 */ background-repeat: no-repeat; /* 不重復 */ background-position: center; /* 圖片定位：居中 */ /* 在網頁當中讓圖片或者元素往上移動或者往左移動，需使用負值 */ } .box2{ background-color: #f1c4be; background-image: url(../img/pic2.jpg); background-repeat: no-repeat; background-position: center; background-size: 25% 25%; /* width*25% height*25% */ /*background-size: 100px 60px; 因為數字是湊好的，所以效果與上方一致*/ }
- 效果截圖
[Web 前端] 011 css 背景屬性