Vấn đề lặp lại nền CSS nền

Tôi có một trang html cần mở rộng chiều rộng và chiều cao, vì vậy cần có khả năng cuộn lên và xuống và trái và phải, tuy nhiên tôi dường như không nhận được độ dốc css để lặp lại- x và để lại một màu đồng nhất.Vấn đề lặp lại nền CSS nền

Stripped xuống mã:

<!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>

này chạy gradient vào một màu (# 366fcd) khi bạn cuộn xuống, nhưng khi bạn di chuyển sang phải, các điểm dừng gradient và bạn nhìn thấy màu rắn có quá. See example.

Nếu tôi xóa màu nền: # 366fcd; } từ yếu tố html, sau đó gradient lặp lại dọc theo trục x như mong đợi, nhưng khi bạn cuộn xuống, gradient dừng lại và màu trắng xuất hiện. See example.

Tôi biết tôi luôn có thể sử dụng hình nền nhưng muốn CSS hoạt động.

Ồ, điều này đã được thử nghiệm trong Chrome và FF trên OSX Lion.

Anthony

Nguồn

2011-09-15 littlecharva

Tất cả bạn cần là background-attachment thuộc tính. Với tài sản này bạn có thể sửa chữa nền của cơ thể trong khi cơ thể của bạn đang làm đầy chiều cao màn hình hoàn toàn.

background-attachment:fixed; 
height:100%;

Nhìn vào ví dụ của tôi ở đây http://jsfiddle.net/mohsen/TanzY/

Dưới đây là ví dụ của bạn cố định: http://jsbin.com/ileqid/4

Tôi đã gỡ bỏ background-repeat bất động sản và cũng thay đổi màu sắc để được trực quan hơn.

Nếu bạn muốn cuộn nền của mình thì bạn cần đặt the background-attachment thành scroll. Cuộn chỉ xảy ra nếu bạn có nội dung cao như vậy trong ví dụ this Tôi đặt thẻ body height thành 3000px.

Nguồn

2011-09-15 07:51:41 Mohsen

cố định JSBin dụ bạn dường như không làm việc trong Chrome 13 trên Mac. khi tôi di chuyển sang phải, nền gradient vẫn biến mất. –

Tôi đã khắc phục điều đó, Đó là vì css được đặt OP cho thẻ html. – Mohsen

aha! Tôi nghĩ rằng nó có thể là một cái gì đó như thế. Làm tốt lắm. –

Áp dụng gradient của bạn cho thẻ 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>

Tested trong FF6, Chrome 13 và Safari 5.

Nguồn

2011-09-15 08:26:47 easwee

Vấn đề lặp lại nền CSS nền

Trả lời

Các vấn đề liên quan