Nền gradient cố định với css

Question

Tôi muốn cho trang của mình có nền màu gradient từ trên xuống dưới. Tôi muốn nền hoạt động như một hình ảnh cố định trong đó gradient trải dài từ phía trên cùng của chế độ xem trình duyệt hiện tại ở phía dưới và trông giống như khi bạn cuộn lên và xuống trang. Nói cách khác, nó không lặp lại khi bạn cuộn. Nó vẫn cố định tại chỗ.

Vì vậy, những gì tôi muốn là thế này:

và sau khi di chuyển đến dưới cùng bạn nhìn thấy thông báo này

rằng gradient trông giống hệt nhau trên dưới cùng của trang như nó đứng đầu. Nó chuyển từ màu vàng sang đỏ.

Điều tốt nhất tôi thực sự có thể làm là có gradient trải rộng toàn bộ nội dung của trang thay vì chỉ các phần có thể xem được, như thế này:

và phía dưới trông như thế này:

Lưu ý ở đây rằng độ dốc kéo dài toàn bộ chiều dài của nội dung, không chỉ những gì đang hiển thị. Vì vậy, ở đầu trang bạn nhìn thấy chủ yếu là màu vàng và ở dưới cùng của trang bạn nhìn thấy chủ yếu là màu đỏ.

Tôi cho rằng tôi có thể giải quyết điều này bằng cách sử dụng hình ảnh được kéo dài trong mặt phẳng y và lặp lại trong mặt phẳng x nhưng tôi không muốn làm điều này vì có thể kéo dài hình ảnh. Điều này có thể được thực hiện tự động chỉ với CSS?

Answer 1

Nếu bạn muốn thực hiện điều này bằng cách sử dụng gradient CSS3, hãy thử thêm phần sau vào bộ chọn.

Ví dụ: nếu bạn đang áp dụng gradient của mình thành #background, thì hãy thêm sau gradient gradient. Quan trọng: Bạn phải thêm phần này sau thuộc tính nền.

background-attachment: fixed;

w3schools.org: CSS background-attachment property

toàn bộ mã của bạn có thể trông giống như:

#background { 
    background: #1e5799; 
    background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); 
    background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); 
    background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); 
    background-attachment: fixed; 
} 

Answer 2

html { 
    height: 100%; 
    /* fallback */ 
    background-color: #1a82f7; 
    background: url(images/linear_bg_2.png); 
    background-repeat: repeat-x; 

    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 

    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 

    /* IE 10 */ 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 

    /* Opera 11.10+ */ 
    background: -o-linear-gradient(top, #2F2727, #1a82f7); 
} 

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

Tùy thuộc vào những gì trình duyệt bạn hỗ trợ, bạn có thể hoặc có thể không muốn một fallback hình ảnh. Nếu không, bạn có thể muốn bao gồm cú pháp filter và -ms-filter để thay thế cho IE 6-8. Ngay cả khi không có hình ảnh này hoặc hình ảnh, nó sẽ quay trở lại background-color

Answer 3

Một cách khác để làm điều này (với hình ảnh thực tế):

body { 
    background-attachment: local; // or 'fixed' here 
    background-image: url(fancy.jpg); 
    background-size: 100% 100%; 
    overflow:auto; 
    box-sizing:border-box; 
    width:100%; 
    height:100%; 
    margin:0; 
}