ok nói nội dung bên trong <body>tổng số cao 300px.
Nếu tôi đặt nền của <body>việc sử dụng -webkit-gradienthoặc-moz-linear-gradient
Sau đó, tôi tối đa hóa cửa sổ của mình (hoặc chỉ làm cho nó cao hơn 300px), độ dốc sẽ chính xác cao 300px (chiều cao của nội dung) và chỉ cần lặp lại để lấp đầy phần còn lại của cửa sổ.
Tôi cho rằng đây không phải là một lỗi vì nó giống nhau trong cả webkit và tắc kè.
Nhưng có cách nào để làm cho độ dốc kéo dài để lấp đầy cửa sổ thay vì lặp lại không?
Câu trả lời:
Áp dụng CSS sau:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}Chỉnh sửa: Đã thêm vào margin: 0;tuyên bố cơ thể trên mỗi bình luận ( Martin ).
Chỉnh sửa: Đã thêm vào background-attachment: fixed;tuyên bố cơ thể trên mỗi bình luận ( Johe Green ).
background-repeatvà background-attachmentđến sau các backgroundquy tắc của bạn . Nếu không, nền vẫn có thể lặp lại.
Liên quan đến một câu trả lời trước, thiết lập htmlvà bodyđể height: 100%dường như không làm việc nếu nhu cầu nội dung để di chuyển. Thêm fixedvào nền dường như để khắc phục điều đó - khôngneed for height: 100%;
Ví dụ:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}background-attachment: fixed
min-height:100%(trong các trình duyệt tương thích)
Tôi biết tôi đến bữa tiệc muộn, nhưng đây là một câu trả lời chắc chắn hơn.
Tất cả những gì bạn cần làm là sử dụng min-height: 100%;chứ không phải height: 100%;và nền gradient của bạn sẽ mở rộng toàn bộ chiều cao của chế độ xem mà không lặp lại, ngay cả khi nội dung có thể cuộn được.
Như thế này:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}Đây là những gì tôi đã làm để giải quyết vấn đề này ... nó sẽ hiển thị độ dốc cho toàn bộ chiều dài của nội dung, sau đó chỉ đơn giản là chuyển sang màu nền (thường là màu cuối cùng trong gradient).
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}<body>
<h1>Hello world!</h1>
</body>Tôi đã thử nghiệm điều này trong FireFox 3.6, Safari 4 và Chrome, tôi giữ màu nền trong cơ thể cho bất kỳ trình duyệt nào vì một số lý do không hỗ trợ tạo kiểu thẻ HTML.
Cài đặt html { height: 100%}có thể tàn phá IE. Đây là một ví dụ (png). Nhưng bạn biết những gì làm việc tuyệt vời? Chỉ cần đặt nền của bạn trên <html>thẻ.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}Bối cảnh kéo dài đến tận cùng và không có hành vi cuộn lạ nào xảy ra. Bạn có thể bỏ qua tất cả các bản sửa lỗi khác. Và điều này được hỗ trợ rộng rãi. Tôi chưa tìm thấy trình duyệt không cho phép bạn áp dụng nền cho thẻ html. Đó là CSS hoàn toàn hợp lệ và đã được một thời gian. :)
htmlnhưng nó dừng một phần xuống trang trong trường hợp của tôi. Thêm background-attachment:fixedkhông giải quyết vấn đề. Tôi đã thấy điều này xảy ra trên nhiều trang web nhưng không thể tìm ra nguyên nhân.
html, body { height: 100%; }.
Có rất nhiều thông tin một phần trên trang này, nhưng không phải là một thông tin đầy đủ. Đây là những gì tôi làm:
<DIV id='container'>cái mà tôi đặt tất cả nội dung của mình vàoĐây là một ví dụ:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}Điều này đã được thử nghiệm với IE, Chrome và Firefox trên các trang có kích thước và nhu cầu cuộn khác nhau.
Dơ bẩn; có thể bạn chỉ cần thêm một chiều cao tối thiểu: 100%; vào thẻ html và thẻ cơ thể? Điều đó hoặc ít nhất là đặt màu nền mặc định cũng là màu gradient cuối.
Tôi gặp khó khăn khi nhận được câu trả lời ở đây để làm việc.
Tôi thấy nó hoạt động tốt hơn để sửa một div kích thước đầy đủ trong cơ thể, cung cấp cho nó một chỉ số z âm và gắn gradient vào nó.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>Đây là một mẫu đầy đủ https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
Tôi đã sử dụng mã CSS này và nó hoạt động với tôi:
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}Một thông tin liên quan là bạn có thể tạo độ dốc tuyệt vời của riêng mình tại http://www.colorzilla.com/gradient-editor/
/ Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;Đây là những gì tôi đã làm:
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}trước khi tôi nổi cơ thể, có một khoảng trống trên đầu và nó đang hiển thị màu nền của html. nếu tôi loại bỏ bgcolor của html, khi tôi cuộn xuống, gradient sẽ bị cắt. Vì vậy, tôi thả nổi cơ thể và đặt vị trí của nó thành tương đối và chiều rộng thành 100%. nó hoạt động trên safari, chrome, firefox, opera, internet expl .. oh chờ đã. : P
các bạn nghĩ sao?
margin:0;vàobodynếu không tôi có một khoảng trống ở cuối trang của tôi.