วิธีทำพื้นหลังเป็นแถบด้วย CSS

เนื้อหา

• คำสั่ง
• คำสั่ง
• การเตือน

ใช้รหัส CSS คุณสามารถสร้างพื้นหลังเป็นแถบสำหรับหน้าเว็บโดยไม่ต้องใช้กราฟิก เอฟเฟกต์นี้ใช้ระดับการไล่ระดับสี CSS ที่มีการแบ่งสีหลายครั้งรวมถึงคุณสมบัติขนาดพื้นหลังเพื่อให้เวกเตอร์ไล่ระดับสีทำซ้ำบนหน้าจอ วิธีที่ดีที่สุดในการทำเช่นนี้คือการเริ่มต้นด้วยสีพื้นหลังที่เป็นของแข็งและทำหนึ่งในแถบสีโปร่งใสของคุณเพื่อเน้นสี ผู้ใช้ที่เข้าชมหน้าของคุณโดยใช้อินเทอร์เน็ตเบราว์เซอร์รุ่นเก่าจะเห็นสีทึบ

คำสั่ง

CSS ช่วยให้คุณสร้างพื้นหลังเป็นแถบสำหรับทั้งหน้าเว็บโดยไม่ต้องใช้กราฟิก (แจ็ค Hollingsworth / Photodisc รูปภาพ / Getty)

คำสั่ง

1. เปิดไฟล์สไตล์ชีต CSS ใน Notepad หรือในโปรแกรมแก้ไขรหัส เพิ่มกฎนี้ในตอนท้ายของไฟล์:

   html {height: 100%; }

   กฎนี้ทำให้สามารถเติมพื้นหลังทั้งหมดของหน้าเว็บด้วยแถบไล่ระดับสีที่จะสร้าง

2. ตั้งค่าสีพื้นหลังสำหรับหน้าของคุณภายใน "html {}" เพื่อให้สีพื้นฐานสำหรับแถบของคุณและค่าเริ่มต้นสำหรับเบราว์เซอร์เก่า:

   html {height: 100%; สีพื้นหลัง: สีดำ; }

3. เพิ่มรหัสต่อไปนี้ใน "html {}" เริ่มต้นของคุณเพื่อสร้างเอฟเฟกต์แถบแนวนอน:

   ภาพพื้นหลัง: เส้นไล่ระดับสี (โปร่งใส 50%, สีขาว 50%);

   มันจะสร้างการแบ่งสีสองครั้งครั้งแรกที่โปร่งใสและครั้งที่สองเป็นสีขาว การหยุดชะงักของแต่ละสีใช้ 50% ของพื้นที่ไล่ระดับสีบนหน้าจอ ปรับความกว้างของแถบโดยการเปลี่ยนค่าร้อยละ

   
   

4. เพิ่มค่าศูนย์ลงในตัวแบ่งสีแรกและแยกด้วยเครื่องหมายจุลภาค:

   ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (0, โปร่งใส 50%, ดำ 50%);

   สิ่งนี้จะจัดตำแหน่งแถบของคุณในแนวตั้งแทนที่จะวางในแนวนอน

5. ทำซ้ำคุณสมบัติภาพพื้นหลังและค่าในบรรทัดใหม่ ทำสองครั้งโดยสร้างสามบรรทัดด้วยรหัสเดียวกัน เพิ่มคำนำหน้า "-moz" เพื่อไล่ระดับสีเชิงเส้นในหนึ่งในบรรทัดที่ซ้ำกันของรหัส เพิ่มคำนำหน้า "-webkit" ไปยังบรรทัดที่ซ้ำกันอื่น ๆ :

   ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (0, โปร่งใส 50%, ขาว 50%); background-image: -moz-linear-gradient (0, โปร่งใส 50%, ขาว 50%); background-image: -webkit-linear-gradient (0, โปร่งใส 50%, ขาว 50%);

6. จำกัด การไล่ระดับสีให้เท่ากับจำนวนพิกเซลโดยตั้งค่าขนาดพื้นหลังในบรรทัดถัดไปในโค้ด CSS ของคุณ:

   ขนาดพื้นหลัง: 20px;

   เปลี่ยนจำนวนพิกเซลขนาดพื้นหลังเพื่อแก้ไขขนาดการไล่ระดับสี เนื่องจากการทำซ้ำอย่างต่อเนื่องของการไล่ระดับความกว้างของหน้าการทำซ้ำแต่ละครั้งจะสอดคล้องกับชุดของแถบบนหน้าจอ

การเตือน

• เบราว์เซอร์รุ่นเก่าบางรุ่นไม่รองรับการไล่ระดับสี CSS3 เมื่อคุณต้องการแสดงแถบของเบราว์เซอร์ทุกประเภทให้ใช้ความคิดเห็นแบบมีเงื่อนไขเพื่อรวมสไตล์ชีทพร้อมกับแผนภูมิที่ซ้ำกัน