วิธีทำภาพพื้นหลังบนเว็บไซต์

สารบัญ:

วิธีทำภาพพื้นหลังบนเว็บไซต์
วิธีทำภาพพื้นหลังบนเว็บไซต์

วีดีโอ: วิธีทำภาพพื้นหลังบนเว็บไซต์

วีดีโอ: วิธีทำภาพพื้นหลังบนเว็บไซต์
วีดีโอ: ภาษา HTML คำสั่งใส่สีพื้นหลัง,ใส่ภาพพื้นหลังเว็บไซต์ 2024, พฤศจิกายน
Anonim

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

วิธีทำภาพพื้นหลังบนเว็บไซต์
วิธีทำภาพพื้นหลังบนเว็บไซต์

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

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

ขั้นตอนที่ 3

ในแท็ก ให้เขียนแอตทริบิวต์ background = "path to image" ตัวอย่างบันทึก: หรือ. ในขณะเดียวกัน โปรดทราบว่าแท็กควรปรากฏเพียงครั้งเดียวในโค้ด ไม่ควรคูณ

ขั้นตอนที่ 4

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

• ใช้โปรแกรม Adobe Photoshop ตั้งค่าพารามิเตอร์รูปภาพที่ต้องการเป็นพิกเซล ("Image" - "Image size");

• กำหนดขนาดที่ต้องการในโค้ด html

ตัวอย่างเช่น หากความกว้าง 1250 พิกเซล และความสูง 650 พิกเซล คุณจะต้องเพิ่มแอตทริบิวต์ที่จำเป็นสำหรับเซลล์ตารางที่จะวางรูปภาพ

คุณไม่สามารถกำหนดขนาดในแท็กได้ - รูปภาพจะแสดงเป็นขนาดเต็มเสมอ

ขั้นตอนที่ 5

อะนาล็อกของ ccs สำหรับการแทรกภาพพื้นหลัง:

ภาพพื้นหลัง

ร่างกาย {

ภาพพื้นหลัง: url (รูปภาพ / bg.jpg);

}

แอตทริบิวต์ "background-image: url (images / bg.jpg)" เป็นเส้นทางไปยังภาพพื้นหลัง