html的背景图片设置
背景顏色：background-color，可用rgb、rgba、#off等進行設置
背景圖片：background-img，可用網址或圖片存放地址進行設置
平鋪方式：
background-repeat:repeat，在背景上只出現一張圖片，沒有設置寬高時全屏鋪滿
background-repeat:repeat-x，橫向鋪滿
background-repeat:repeat-y，縱向鋪滿
關聯方式：
background-attachment:scroll? ? ? ? 默認
background-attachment:fixed? ? ? ? 鎖定
定位方式：
background-position:center center，圖片在背景上居中
background-position:center bottom，圖片在背景上底部居中
background-position:right top，圖片在背景右上角
background-position:150px 150px，用像素決定位置
background-position:-150px -150px，圖片只顯示部分，負的部分無法呈現
background-position:center 0，鎖定住圖片
背景縮寫格式：
background:背景顏色? 背景圖片? 平鋪方式? 關聯方式? 定位方式
background:red? url(…)? ?no-repeat? fixed? center center
示例一：只顯示部分圖片
<!doctype html> <html> <head><meta charset="utf-8"><title>背景圖片的定位練習</title><style>div{width:800px;height:700px;}.pp1{background:red url(images/a1.jpg) no-repeat -100px -100px;}</style> </head><body><div class="pp1"></div></body> </html>?
示例二：滾動鼠標時背景圖片不跟著滾動
<!doctype html> <html> <head><meta charset="utf-8"><title>背景圖片綜合運用1</title><style>.pp1{width:1920px;height:720px;background:url(images/yx.jpg) no-repeat fixed center 0;}</style> </head><body><div class="pp1"></div></body> </html>?
實例三：全局平鋪
<!doctype html> <html> <head><meta charset="utf-8"><title>背景圖片應用1</title><style>div{width:2000px;height:1000px;}.pp1{background-image:url(images/s2.gif);background-repeat:repeat;}</style> </head><body><div class="pp1"></div></body> </html>總結
以上是生活随笔為你收集整理的html的背景图片设置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VC++进行ActiveX控件的开发
- 下一篇： 微分和积分公式大全