一天搞定CSS：背景background--03
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：背景background--03
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
背景分為—背景顏色和背景圖片
1.背景屬性
2.背景顏色
代碼演示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 10px solid red;/*背景顏色三種表示方法:顏色的單詞,rgb,16進制*/background-color:green;background-color: rgb(0,0,0);background-color:#008800;}</style></head><body><div></div></body> </html>3.背景圖片
背景圖片有：位置 重復性
代碼演示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 300px;height: 300px;border: 10px solid red;/*背景圖片*/background-image:url(images/img.jpg);/*背景圖片是否重復：repeat* repeat-x橫向重復* repeat-y縱向重復* no-repeat不重復* */background-repeat: no-repeat;background-repeat: repeat-x;background-repeat: repeat-y;/*background-position:x y; 背景圖片的位置傳數值：（背景圖片離左上角的距離）x:正值 從容器的左邊往右邊走的距離負值 從容器的左邊往左邊走的距離y:正值 從容器的上邊往下邊走的距離負值 從容器的上邊往上邊走的距離傳關鍵字x:left 圖片在容器的左邊center 圖片在容器X軸的中心right 圖片在容器的右邊y:top 圖片在容器的上邊center 圖片在容器Y軸的中心bottom 圖片在容器的下邊* */background-position: 5px 10px;}</style></head><body><div></div></body> </html>總結
以上是生活随笔為你收集整理的一天搞定CSS：背景background--03的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：边框border--02
- 下一篇： 一天搞定CSS：字体font--04