如何讓網頁背景圖片完整顯示

本文轉載自查看原文 2015-06-11 16:10 2754

在給網頁加背景圖時會遇到：圖片過大，只能顯示出部分，不能完整的顯示出來，實現不了設計的效果，怎么辦？

<!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>無標題文檔</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 style=" width:100px; height:1000px;background:#000; opacity:0.5;">
</p>
</html>
</body>
</html>

View Code

background:url(images/hi-wifi-bg.jpg) no-repeat center center; background-size:100% 100%;

背景圖片的定位background-position設為center center（x,y）

background-size規定背景圖像的尺寸，默認值是auto，

語法

background-size: length|percentage|cover|contain;

值	描述
length	設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
percentage	以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
cover	把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain	把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

在這些屬性中多試幾次

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 網頁背景圖片拉伸網頁背景圖片的定時切換如何實現網頁背景圖片自適應全屏？網頁背景圖片自然縮放用CSS讓網頁背景圖片居中的方法【CSS】css網頁背景圖片設置 CSS實現網頁背景圖片自適應全屏,自適應背景圖片 CSS實現網頁背景圖片自適應全屏 html 網頁背景圖片根據屏幕大小CSS自動縮放 CSS實現網頁背景圖片自適應全屏