ใช้เทคนิคนี้กับ CSS
หากคุณกำลังออกแบบเว็บไซต์คุณอาจสนใจเรียนรู้วิธีสร้างภาพพื้นหลังหรือลายน้ำคงที่บนเว็บเพจ นี่เป็นการออกแบบที่ได้รับความนิยมทั่วไปในช่วงเวลาหนึ่ง เป็นผลประโยชน์ที่มีในกระเป๋าออกแบบเว็บของเทคนิค
หากคุณยังไม่ได้ทำแบบนี้มาก่อนหรือได้ลองใช้ก่อนหน้านี้โดยไม่มีโชคกระบวนการนี้อาจดูน่ากลัว แต่ก็ไม่ยากเลย ด้วยบทแนะนำสั้น ๆ นี้คุณจะได้รับข้อมูลที่จำเป็นในการใช้เทคนิคนี้ภายในไม่กี่นาทีโดยใช้ CSS
เริ่มต้นใช้งาน
ภาพพื้นหลังหรือลายน้ำ (ซึ่งเป็นภาพพื้นหลังที่เบามาก ๆ ) มีประวัติในการออกแบบพิมพ์ เอกสารมีลายน้ำยาวมาเพื่อป้องกันไม่ให้คัดลอก นอกจากนี้ใบปลิวและโบรชัวร์ต่างๆยังใช้ภาพพื้นหลังขนาดใหญ่เป็นส่วนหนึ่งของการออกแบบสำหรับชิ้นงานพิมพ์ การออกแบบเว็บยืมสไตล์มานานแล้วจากรูปแบบการพิมพ์และภาพพื้นหลังเป็นรูปแบบที่ยืมมา
ภาพพื้นหลังขนาดใหญ่เหล่านี้สร้างได้ง่ายโดยใช้คุณสมบัติ สไตล์ CSS สาม แบบ ต่อไปนี้:
- ภาพพื้นหลัง
- พื้นหลังซ้ำ
- พื้นหลังแนบ
- พื้นหลังขนาด
ภาพพื้นหลัง
คุณจะใช้ภาพพื้นหลังเพื่อกำหนดภาพที่จะใช้เป็นลายน้ำของคุณ สไตล์นี้ใช้เส้นทางไฟล์เพื่อโหลดภาพที่คุณมีในไซต์ของคุณซึ่งน่าจะอยู่ในไดเรกทอรีที่มีชื่อว่า "images"
ภาพพื้นหลัง: url (/images/page-background.jpg);
สิ่งสำคัญคือภาพที่ตัวเองมีน้ำหนักเบาหรือโปร่งใสมากกว่าภาพปกติ ซึ่งจะสร้างรูปแบบ "ลายน้ำ" ซึ่งภาพกึ่งโปร่งใสอยู่ด้านหลังข้อความกราฟิกและองค์ประกอบหลักอื่น ๆ ของหน้าเว็บ หากไม่มีขั้นตอนนี้ภาพพื้นหลังจะแข่งขันกับข้อมูลบนหน้าเว็บของคุณและทำให้อ่านยาก
คุณสามารถปรับภาพพื้นหลังในโปรแกรมแก้ไขใด ๆ เช่น Adobe Photoshop
พื้นหลังซ้ำ
คุณสมบัติ background-repeat จะเกิดขึ้นต่อไป ถ้าคุณต้องการให้ภาพของคุณเป็นภาพกราฟิกลายน้ำขนาดใหญ่คุณจะใช้คุณสมบัตินี้เพื่อทำให้ภาพนั้นแสดงผลเพียงครั้งเดียว
background-repeat: ไม่ซ้ำ;
ค่าเริ่มต้นคือภาพจะทำซ้ำซ้ำแล้วซ้ำอีกในหน้า นี่เป็นสิ่งที่ไม่พึงปรารถนาในการออกแบบหน้าเว็บที่ทันสมัยที่สุดดังนั้นรูปแบบนี้จึงควรได้รับการพิจารณาว่าจำเป็นใน CSS ของคุณ
พื้นหลังแนบ
พื้นหลังที่แนบมาเป็นพร็อพเพอร์ตี้ที่นักออกแบบเว็บหลายคนลืม การใช้รูปภาพนี้ช่วยให้ภาพพื้นหลังของคุณคงที่ในตำแหน่งเมื่อคุณใช้คุณสมบัติ "คงที่" เป็นภาพที่เปลี่ยนเป็นลายน้ำที่ได้รับการแก้ไขบนหน้าเว็บ
ค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้นี้คือ "scroll" หากคุณไม่ได้ระบุค่าของเอกสารแนบพื้นหลังพื้นหลังจะเลื่อนไปพร้อมกับส่วนที่เหลือของหน้า
พื้นหลังแนบ: ถาวร;
พื้นหลังขนาด
พื้นหลังขนาดเป็นคุณสมบัติ CSS ใหม่ จะช่วยให้คุณสามารถกำหนดขนาดของพื้นหลังตามมุมมองที่กำลังดูได้สิ่งนี้มีประโยชน์มากสำหรับ เว็บไซต์ที่ตอบสนอง ซึ่งจะแสดงในขนาดต่างๆ บนอุปกรณ์ ต่างๆ
พื้นหลังขนาด: ปก;
ค่าที่เป็นประโยชน์สองค่าที่คุณสามารถใช้สำหรับพร็อพเพอร์ตี้นี้ ได้แก่
- ฝาครอบ - ปรับขนาดพื้นหลังให้เต็มความกว้างหรือความสูงเต็ม ซึ่งหมายความว่าบางส่วนของภาพอาจไม่ปรากฏบนหน้าจอ แต่จะครอบคลุมพื้นที่ทั้งหมด
- ประกอบด้วย - ปรับขนาดภาพเพื่อให้ทั้งความกว้างและความสูงแสดงในพื้นที่ที่มีสไตล์ ภาพไม่ถูกตัดออก แต่ข้อเสียคือบางส่วนของพื้นที่อาจไม่ได้รับความคุ้มครองจากภาพ
การเพิ่ม CSS ลงในหน้าเว็บของคุณ
หลังจากที่คุณเข้าใจคุณสมบัติและค่าเหล่านี้แล้วคุณสามารถเพิ่มรูปแบบเหล่านี้ลงในเว็บไซต์ของคุณได้
เพิ่มข้อมูลต่อไปนี้ลงใน HEAD ของหน้าเว็บของคุณหากคุณสร้างไซต์แบบหน้าเดียว เพิ่มลงในสไตล์ CSS ของสไตล์ชีตภายนอกถ้าคุณสร้างเว็บไซต์หลายหน้าและต้องการใช้ประโยชน์จากพลังของแผ่นงานภายนอก