ภาพพื้นหลังของร่างกายทำได้อย่างง่ายดาย

HTML

คุณลักษณะที่ดีที่คุณจะพบในหลาย ๆ ไซต์คือพื้นที่เนื้อหาตรงกลางจะวางซ้อนหน้าโดยมีเงาตกกระทบอยู่ด้านหลัง เป็นวิธีที่ค่อนข้างง่ายในการทำให้บล็อกของคุณดูดี (หรือเว็บไซต์อื่น ๆ ) ด้วยภาพพื้นหลังเพียงภาพเดียว

เป็นอย่างไรบ้าง?

  1. ดูว่าเนื้อหาของคุณกว้างแค่ไหน ตัวอย่าง: 750px
  2. สร้างภาพในแอปพลิเคชันภาพประกอบของคุณ (ฉันใช้ Illustrator) ให้กว้างกว่าพื้นที่เนื้อหา ตัวอย่าง: 800px
  3. ตั้งค่าพื้นหลังของรูปภาพเป็นพื้นหลังที่คุณต้องการในแต่ละด้านของบล็อก
  4. เพิ่มพื้นที่สีขาวบนพื้นหลัง
  5. ใช้เงาบนพื้นที่สีขาวที่ยื่นออกมาจากด้านใดด้านหนึ่งของพื้นที่
  6. กำหนดพื้นที่ครอบตัดให้มีความกว้างสูง 1 พิกเซล สิ่งนี้จะทำให้ดาวน์โหลดรูปภาพได้ดีและกะทัดรัดเพื่อการเรนเดอร์ที่รวดเร็ว
  7. ส่งออกภาพ

นี่คือวิธีที่ฉันสร้างโดยใช้ Illustrator (โปรดทราบว่าฉันมีพื้นที่ครอบตัดสูงกว่ามาก…นั่นเป็นเพียงเพื่อให้คุณเห็นว่าฉันกำลังทำอะไรอยู่):
พื้นหลังด้วย Illustrator

นี่คือตัวอย่างของผลลัพธ์ที่ออกมาพร้อมกับภาพพื้นหลัง:
ตัวอย่างภาพพื้นหลัง

ต่อไปนี้คือวิธีการนำรูปภาพไปใช้โดยใช้แท็กสไตล์ร่างกายของคุณในไฟล์ CSS ไฟล์

พื้นหลัง: # B2B2B2 url ('images / bg.gif') ศูนย์ซ้ำ;

นี่คือการแยกแท็กสไตล์พื้นหลัง:

  • # B2B2B2 - ตั้งค่าสีพื้นหลังโดยรวมของหน้า ในตัวอย่างนี้เป็นสีเทาเพื่อให้เข้ากับสีเทาบนภาพพื้นหลัง
  • url ('images / bg.gif') - ตั้งค่าภาพพื้นหลังที่คุณต้องการใช้
  • ซ้ำ -y - ตั้งค่าภาพให้ทำซ้ำบนแกน y ดังนั้นภาพพื้นหลังจะทำซ้ำจากบนลงล่างของหน้า
  • center - ตั้งค่าภาพที่กึ่งกลางของหน้า

ดีและง่าย ... หนึ่งภาพแท็กสไตล์เดียว!

2 คอมเมนต์

  1. 1
  2. 2

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.