HTML /爲背景

Question

我需要對網站的背景幫助CSS設計，下面是詳細信息我想知道：左和網站的權

• 不同的漸變背景（它應該工作也在所有IE瀏覽器上）。
• 我將如何使用HTML/CSS來做到這一點？

請幫忙。謝謝！

Answer 1

一個最好的主意，在所有的瀏覽器工作，大部分的決議時，利用一個巨大的圖像，在中間分離，具有2048的寬度，使垂直滾動固定。

這將適用於所有瀏覽器。

body {background: url("huge-image.png") center top no-repeat;} 

對於所有說bg的人都會很大。

分辨率的圖像：19488 x 3552和大小隻是51 KB。檢查出來：

http://lib.znate.ru/pars_docs/refs/35/34496/34496_html_m46d9bb81.gif

Answer 2

1. 生成你的身體背景here
2. 創建居中div容器和透明門簾圖像背景
3. 創建div容器100％的高度，並設置中心網站div容器背景爲灰色

祝你好運。

澄清了昆汀的意見：使用對角線梯度：

background: #b5bdc8; /* Old browsers */ 
background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */ 
background: linear-gradient(135deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

Answer 3

這是方法，通過它，你可以通過CSS使背景紋理

background: linear-gradient(left, white 50%, #8b0 50%); 
background-size: 100px 100px; 

注意：您可以改變極性的價值和線性，然後通過後臺定位整個頁面的不同背景位置

也檢查了這一點.-->http://lea.verou.me/css3patterns/

它也可以使用圖像作爲漸變基地。打開這個noisetexturegenerator.com，並嘗試下面的事情

body { background-image:url('gradient image'); background-repeat:repeat-x; } 

Answer 4

您可以使用CSS梯度。這應該適用於所有瀏覽器。

background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 

background-image: -webkit-gradient(
    linear, 
    left top, 
    right bottom, 
    color-stop(0.16, rgb(232,232,232)), 
    color-stop(0.58, rgb(122,122,122)), 
    color-stop(0.79, rgb(115,115,115)) 
); 

老版本的IE不支持漸變，所以你必須製作第二個div容器，它在其他瀏覽器上是透明的。

，並確定新的CSS舊版本的IE瀏覽器，例如：

<!--[if lte IE 8]> 
<style> 

    .diaggradientback 
    { 
     position:absolute; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     overflow:hidden; 
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000'); 
    } 

    .diaggradientfront 
    { 
     position:absolute; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     overflow:hidden; 
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000'); 
    } 
</style> 
<![endif]--> 

Answer 5

如果你希望它在舊的瀏覽器，你可以寫這樣的事情：

http://jsfiddle.net/ftcjZ/2/

這是更復雜的HTML - 這一切都取決於你需要什麼樣的瀏覽器來運行它。

CSS：

.bg-left { background: url('http://cdn.imghack.se/images/3be5ae39376f069c0f49dd0cf09e74c7.png') top left no-repeat; } 
.bg-right { padding: 0 118px 0 125px; background: url('http://cdn.imghack.se/images/ae53c28777043687b9a110e867798cb5.png') top right no-repeat; } 
.main-content { height: 800px; background-color: white; } 

HTML：

<div class="bg-left"> 
    <div class="bg-right"> 
    <div class="main-content"> 

    </div> 
    </div> 
</div> 

編輯：我更新的代碼在.bg-right改變餘量主要容器填充，因爲這是更加可靠的解決方案。