ตกลงพูดเนื้อหาภายใน<body>ผลรวมสูง 300px
หากฉันตั้งค่าพื้นหลังของการ<body>ใช้งาน-webkit-gradientหรือ-moz-linear-gradient
จากนั้นฉันขยายหน้าต่างให้ใหญ่ที่สุด (หรือทำให้สูงกว่า 300px) การไล่ระดับสีจะสูงถึง 300px (ความสูงของเนื้อหา) และทำซ้ำเพื่อเติมส่วนที่เหลือของหน้าต่าง
ฉันสมมติว่านี่ไม่ใช่ข้อผิดพลาดเพราะมันเหมือนกันทั้งใน webkit และตุ๊กแก
แต่มีวิธีที่จะทำให้การไล่ระดับสีเพื่อเติมหน้าต่างแทนการทำซ้ำ?
คำตอบ:
ใช้ CSS ต่อไปนี้:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
แก้ไข:เพิ่มmargin: 0;ลงในการประกาศเนื้อหาตามความคิดเห็น ( Martin )
แก้ไข:เพิ่มbackground-attachment: fixed;ลงในการประกาศเนื้อหาตามความคิดเห็น ( Johe Green )
background-repeatและbackground-attachmentมาหลังจากที่คุณbackgroundกฎ มิฉะนั้นพื้นหลังอาจยังทำซ้ำ
เกี่ยวกับคำตอบก่อนหน้าการตั้งค่าhtmlและbodyการheight: 100%ดูเหมือนจะไม่ทำงานถ้าความต้องการเนื้อหาที่จะเลื่อน การเพิ่มfixedพื้นหลังดูเหมือนว่าจะแก้ไขได้ - ไม่need for height: 100%;
เช่น:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}background-attachment: fixed
min-height:100%(ในเบราว์เซอร์ที่ใช้งานร่วมกันได้)
ฉันรู้ว่าฉันมางานปาร์ตี้ช้า แต่นี่เป็นคำตอบที่มั่นคงกว่า
สิ่งที่คุณต้องทำคือใช้min-height: 100%;มากกว่าheight: 100%;และพื้นหลังการไล่ระดับสีของคุณจะขยายความสูงทั้งหมดของวิวพอร์ตโดยไม่ต้องทำซ้ำแม้ว่าเนื้อหาจะสามารถเลื่อนได้
แบบนี้:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}นี่คือสิ่งที่ฉันทำเพื่อแก้ปัญหานี้ ... มันจะแสดงการไล่ระดับสีสำหรับความยาวของเนื้อหาจากนั้นก็ย้อนกลับไปที่สีพื้นหลัง (โดยปกติคือสีสุดท้ายของการไล่ระดับสี)
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>ฉันได้ทดสอบสิ่งนี้ใน FireFox 3.6, Safari 4 และ Chrome ฉันเก็บสีพื้นหลังไว้ในเบราว์เซอร์ที่มีเหตุผลบางอย่างที่ไม่สนับสนุนการออกแบบแท็ก HTML
การตั้งค่าhtml { height: 100%}สามารถสร้างความหายนะด้วย IE นี่คือตัวอย่าง (png) แต่คุณรู้ไหมว่าอะไรที่ใช้งานได้ดี? เพียงตั้งค่าพื้นหลังของคุณบน<html>แท็ก
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}พื้นหลังขยายไปถึงด้านล่างและไม่มีพฤติกรรมการเลื่อนแปลก ๆ เกิดขึ้น คุณสามารถข้ามการแก้ไขอื่น ๆ ทั้งหมดได้ และนี่ก็รองรับอย่างกว้างขวาง ฉันไม่พบเบราว์เซอร์ที่ไม่อนุญาตให้คุณใช้พื้นหลังกับแท็ก html มันเป็น CSS ที่ถูกต้องสมบูรณ์แบบและได้รับในขณะที่ :)
htmlมัน แต่หยุดส่วนหน้าลงในกรณีของฉัน การเพิ่มbackground-attachment:fixedจะช่วยแก้ปัญหา ฉันเคยเห็นสิ่งนี้เกิดขึ้นในเว็บไซต์มากกว่าหนึ่งแห่ง แต่ไม่สามารถหาสาเหตุได้
html, body { height: 100%; }หากคุณยังคงมีปัญหาให้ลองเพิ่ม
มีข้อมูลบางส่วนจำนวนมากในหน้านี้ แต่ไม่ใช่ข้อมูลที่สมบูรณ์ นี่คือสิ่งที่ฉันทำ:
<DIV id='container'>ที่ฉันใส่เนื้อหาทั้งหมดของฉันนี่คือตัวอย่าง:
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;
}สิ่งนี้ได้รับการทดสอบกับ IE, Chrome และ Firefox ในหน้าขนาดต่าง ๆ และความต้องการเลื่อน
สกปรก; บางทีคุณสามารถเพิ่มความสูงขั้นต่ำได้: 100%; ไปที่ html และแท็กเนื้อหา? หรืออย่างน้อยก็ตั้งค่าสีพื้นหลังเริ่มต้นที่เป็นสีไล่ระดับสีเช่นกัน
ฉันมีปัญหาในการรับคำตอบจากที่นี่ในการทำงาน
ฉันพบว่ามันทำงานได้ดีกว่าในการแก้ไข div ขนาดเต็มในร่างกายให้ดัชนี z เป็นลบและแนบการไล่ระดับสีกับมัน
<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>นี่คือตัวอย่างเต็มรูปแบบ https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
ฉันใช้โค้ด CSS นี้และมันใช้ได้กับฉัน:
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;
}ข้อมูลที่เกี่ยวข้องคือคุณสามารถสร้างการไล่ระดับสีที่ยอดเยี่ยมของคุณเองได้ที่http://www.colorzilla.com/gradient-editor/
/ สเตน
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;นี่คือสิ่งที่ฉันทำ:
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%;
}ก่อนที่ฉันจะลอยร่างกายมีช่องว่างด้านบนและมันก็แสดงสีพื้นหลังของ html ถ้าฉันลบ bgcolor ของ html เมื่อฉันเลื่อนลงการไล่ระดับสีจะถูกตัด ดังนั้นฉันจึงลอยร่างกายและตั้งค่าตำแหน่งให้สัมพันธ์และความกว้างเป็น 100% มันทำงานบนซาฟารี, โครเมี่ยม, Firefox, โอเปร่า, อินเทอร์เน็ตอธิบาย .. โอ้รอ : P
พวกคุณคิดอย่างไร
แทนที่จะเป็น 100% ฉันเพิ่งเพิ่ม pixxel ตอนนี้และมันใช้ได้กับทั้งหน้าโดยไม่มีช่องว่าง:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
margin:0;ในbodyหรืออื่น ๆ ที่ผมได้ช่องว่างด้านล่างของหน้าของฉัน