CSS 背景漸變重復問題
[英]CSS Background Gradient Repeat Issue
問題描述
我有一個需要擴展寬度和高度的 html 頁面，因此需要能夠上下左右滾動，但是我似乎無法讓 css 漸變重復-x 並向下留下純色。
精簡代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
html {
height: 100%;
background-color: #366fcd; }
body {
margin: 0;
height: 100%;
width: 100%;
background-color: #366fcd;
background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd));
background-repeat: repeat-x;
}
div#TheElement {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 2000px;
top: 2000px;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
當您向下滾動時，這會將漸變運行為純色 (#366fcd)，但是當您向右滾動時，漸變停止並且您也會在那里看到純色。 參見示例。
如果我刪除背景顏色：#366fcd; }從HTML元素，那么沿x軸的梯度重復如預期的，但在向下滾動時，梯度停止和白色出現。 參見示例。
我知道我總是可以使用背景圖像，但更願意讓 CSS 工作。
哦，是的，這是在 OSX Lion 上的 Chrome 和 FF 中測試的。
安東尼
2 個解決方案
解決方案1
27 已采納 2011-09-15 07:51:41
您所需要的只是background-attachment屬性。 使用此屬性，您可以在您的身體完全填充屏幕高度時修復身體的背景。
background-attachment:fixed;
height:100%;
看看我這里的例子http://jsfiddle.net/mohsen/TanzY/
這是您修復的示例： http : //jsbin.com/ileqid/4
我刪除了background-repeat屬性並更改了顏色以使其更加直觀。
如果您希望背景滾動，則需要the background-attachment設置為scroll 。 只有當你有一個高的內容時才會滾動，所以在這個例子中我將 body 標簽的height設置為3000px 。
解決方案2
2 2011-09-15 08:26:47
將漸變應用於 html 標簽。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
html, body {
width:100%;
height:100%;
margin:0;
padding:0;}
html {
background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x;
background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x;
}
div#TheElement {
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
left: 2000px;
top: 2000px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="TheElement">
</div>
</body>
</html>
在 FF6、Chrome 13 和 Safari 5 中測試。
HTML / CSS背景重復問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.