當瀏覽器窗口調整大小時,可以調整網頁的背景圖像大小嗎?網站上可調整大小的背景
1
A
回答
2
下面的代碼演示瞭如何做一個跨瀏覽器的背景圖片:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Cross Browser Background</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
z-index: 1; /* The content should be above the background image */
margin: 20px 30px;
background-color: #000;
color: #FFF;
padding: 10px 15px;
/* Just add some fancy transparency */
opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
</style>
<!-- IE6 sucks as usual - Add some special code for it -->
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y: hidden;
}
body {
overflow-y: auto;
}
#background {
position:absolute;
z-index:-1;
}
#content {
position:static;
}
</style>
<![endif]-->
</head>
<body>
<img id="background" src="background.jpg" alt="" />
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam placerat justo, in tincidunt purus faucibus quis. Pellentesque facilisis mi id neque laoreet laoreet. Quisque quis metus vitae enim lacinia egestas eu at ipsum. Proin sed justo massa, non consequat lacus. Nullam pulvinar commodo egestas. Vivamus commodo ligula a turpis mattis facilisis. Vestibulum vel massa a lorem pulvinar varius nec ut justo. Donec hendrerit dapibus erat. Aenean interdum, lorem sit amet venenatis tincidunt, augue ipsum tincidunt velit, vel egestas nulla quam non quam. Mauris vulputate libero at purus auctor sed egestas magna vehicula.</p>
</div>
</body>
</html>
2
如果使用CSS3你有一個新的屬性稱爲background-size
,你可以用這樣來實現你想要的結果:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
請記住,CSS3仍然不是所有的瀏覽器完全支持(特別是IE),結果可能會有所不同,具體取決於您使用哪個瀏覽器查看頁面。這就是說,希望它有幫助!
如果你想要更多的瀏覽器友好的東西,你可以考慮一個JavaScript解決方案,將捕獲窗口大小和相應地拉伸圖像。
1
是的,是這樣的:
<img id="background" src="..." alt="Background Image" />
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
相關問題
- 1. 可調整大小的背景
- 2. 可調整大小的背景圖像
- 3. Android的軟鍵盤調整大小的背景圖像(網站)
- 4. 響應網站的背景大小調整
- 5. jquery背景調整大小
- 6. 調整div背景大小
- 7. HTML5可調整大小的網站
- 8. 調整網站的大小
- 9. CSS3背景大小:封面上調整大小
- 10. 調整大小的HTML背景問題
- 11. 背景圖像的大小調整
- 12. 調整大小拖動對象背景圖像上調整
- 13. 爲ImageButton背景調整圖像大小
- 14. 表單背景重新調整大小?
- 15. 調整圖像大小,透明背景?
- 16. CSS背景圖像調整大小
- 17. Dreamweaver-背景圖像調整大小
- 18. HTML背景自動調整大小
- 19. 調整大小背景圖片
- 20. 背景視頻調整大小問題
- 21. 背景圖片大小調整
- 22. 重新調整大小背景圖像
- 23. 智能調整大小背景
- 24. 背景圖像調整大小
- 25. 調整背景圖片大小
- 26. 沒有滾動條的可調整大小的背景圖片
- 27. Firefox中可調整大小的textarea的背景色
- 28. 帶有閃光背景的可調整大小的按鈕CS4
- 29. 獲取背景圖像與背景完全調整大小
- 30. 窗口大小後的背景圖像大小調整