如何让网页背景图片完整显示
生活随笔
收集整理的這篇文章主要介紹了
如何让网页背景图片完整显示
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在給網(wǎng)頁加背景圖時會遇到：圖片過大，只能顯示出部分，不能完整的顯示出來，實現(xiàn)不了設(shè)計的效果，怎么辦？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
body{ background:url(images/hi-wifi-bg.jpg) no-repeat center center; background-size:100% 100%; }
</style>
</head>
<body>
<p>
</p>
</html>
</body>
</html>
View Code
background:url(images/hi-wifi-bg.jpg) no-repeat center center; background-size:100% 100%;
背景圖片的定位background-position設(shè)為center center（x,y）
background-size規(guī)定背景圖像的尺寸，默認值是auto，
語法
background-size: length|percentage|cover|contain;
| 值 | 描述 | |
|---|---|---|
| length |
設(shè)置背景圖像的高度和寬度。 第一個值設(shè)置寬度，第二個值設(shè)置高度。 如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
|
| percentage |
以父元素的百分比來設(shè)置背景圖像的寬度和高度。 第一個值設(shè)置寬度，第二個值設(shè)置高度。 如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
|
| cover |
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。 背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
|
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
在這些屬性中多試幾次
總結(jié)
以上是生活随笔為你收集整理的如何让网页背景图片完整显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GCD总结（三）
- 下一篇： 转：lightGBM的黑科技--plot