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

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

แท็ก HTML พื้นฐานในการสร้างพื้นหลัง

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

1. แอตทริบิวต์เขียนแท็ก
2. ผ่านรูปแบบ CSS ในโค้ด HTML
3. เขียนรูปแบบ CSS ในแฟ้มต่างหาก

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

1. วิธีการบันทึกเสียงครั้งแรกผ่านทางแท็กแอตทริบิวต์ (ร่างกาย) ในไฟล์ index.htm จะถูกเก็บไว้ในรูปแบบนี้: (พื้นหลังร่างกาย = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body) นั่นคือถ้าเรามีภาพที่มีชื่อ«รูปภาพ»และนามสกุล JPG, และโฟลเดอร์เราตั้งชื่อ«รูปภาพ»แล้วรายการ HTML โค้ดจะมีลักษณะเช่นนี้: (พื้นหลังร่างกาย = "Images / picture.jpg") ... (/ body) .
2. วิธีที่สองเกี่ยวข้องกับการบันทึกลักษณะ CSS แต่มันถูกเขียนในไฟล์เดียวกันที่มีชื่อ index.htm (รูปร่าง = "พื้นหลัง:: url ( '../ Images / picture.jpg')")
3. วิธีที่สามของการบันทึกจะทำในสองไฟล์ เอกสารที่มีแท็กชื่อ index.htm (หัว) เป็นลายลักษณ์อักษรเช่นสาย (หัว) (link rel = "สไตล์ชีต" type = "text / css ที่" href = "http: // เว็บไซต์ D0 / บทความ / 193110 /% 9F% % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ หัว) ไฟล์ที่เรียกว่าสไตล์ style.css แล้วเขียน: body {พื้นหลัง:: url (Images / picture.jpg ')}

ในฐานะที่เป็นในรูปแบบ HTML ที่จะทำให้ภาพพื้นหลังเราเข้าใจ ตอนนี้คุณต้องคิดออกว่าจะยืดภาพตามความกว้างของหน้าจอทั้งหมด

วิธีที่จะยืดภาพพื้นหลังความกว้างของหน้าต่าง

เราเป็นตัวแทนของเราหน้าจอในรูปแบบของเปอร์เซ็นต์ แต่กลับกลายเป็นว่าทั้งความกว้างและความยาวของหน้าจอจะเป็น 100% × 100% เราจำเป็นต้องยืดภาพความกว้างนี้ เพิ่มลงในไฟล์ภาพที่บันทึกบรรทัด style.css ที่จะยืดภาพมากกว่าทั้งความกว้างและความยาวของจอภาพ ตามที่เขียนไว้ในรูปแบบ CSS? มันง่าย!

ร่างกาย

{

พื้นหลัง:: url (Images / picture.jpg ')

พื้นหลัง-size: 100%; / * โพสต์นี้เหมาะสำหรับเบราว์เซอร์ที่ทันสมัยที่สุด * /

}

ดังนั้นเราจึงคิดวิธีที่จะทำให้พื้นหลังเป็นภาพใน html บนหน้าจอ นอกจากนี้ยังมีวิธีการของการบันทึกในไฟล์ index.htm ที่ แม้ว่าวิธีนี้และล้าสมัย แต่สำหรับผู้เริ่มต้นมันเป็นสิ่งจำเป็นที่จะรู้และเข้าใจ แท็ก (หัว) (รูปแบบ) div {พื้นหลัง-size: ปก; } (/ รูปแบบ) (/ หัว) บันทึกนี้หมายความว่าเราจัดสรรหน่วยพิเศษสำหรับพื้นหลังซึ่งจะวางอยู่เหนือความกว้างทั้งหมดของหน้าต่าง เราได้มีการพิจารณาสองวิธีวิธีที่จะทำให้เว็บไซต์ html ที่ภาพพื้นหลังเพื่อให้ภาพที่ถูกขยายให้ทั้งความกว้างของหน้าจอในใด ๆ ของเบราว์เซอร์ที่ทันสมัย

วิธีที่จะทำให้พื้นหลังได้รับการแก้ไข

ถ้าคุณตัดสินใจที่จะใช้รูปภาพเป็นพื้นหลังของทรัพยากรบนเว็บอนาคตแล้วคุณก็จำเป็นต้องรู้วิธีที่จะทำให้มันคงที่เพื่อที่จะไม่ยืดยาวและไม่ทำให้เสียรูปลักษณ์สวยงาม โดยเพียงแค่ใช้รหัส HTML เพื่อลงทะเบียนนอกจากนี้ยังมีขนาดเล็ก คุณต้องยื่น style.css เพื่อเพิ่มวลีหลังพื้นหลัง:: url (Images / picture.jpg ') คงที่; หรือแทนที่จะเพิ่มหลังจากอัฒภาคเส้นแยก - ตำแหน่ง: คงที่ ดังนั้นวอลล์เปเปอร์ของคุณจะได้รับการแก้ไข ในระหว่างการเลื่อนเนื้อหาบนเว็บไซต์ที่คุณจะเห็นข้อความที่กำลังจะย้ายสาย แต่พื้นหลังยังคงอยู่ในสถานที่ เพื่อให้คุณได้เรียนรู้วิธีการทำภาพพื้นหลัง HTML, ในหลายวิธี

การทำงานกับตารางใน HTML

หลายคนนักพัฒนาเว็บที่ไม่มีประสบการณ์ต้องเผชิญกับตารางและบล็อกมักจะไม่เข้าใจวิธีการทำภาพพื้นหลังตาราง HTML ชอบทุก ทีม HTML และ CSS รูปแบบการเขียนโปรแกรมภาษาเว็บค่อนข้างง่าย และวิธีการแก้ปัญหานี้คือการเขียนคู่ของสายรหัส แล้วที่คุณควรรู้ว่าการเขียนตารางของแถวและคอลัมน์ตามลำดับตามที่ระบุโดยแท็ก (TR) และ (TD) จะทำให้พื้นหลังของตารางในรูปแบบของภาพที่มีความจำเป็นต้องเพิ่มแท็ก (ตาราง) (TR) หรือ (TD) เป็นวลีที่เรียบง่ายมีการอ้างอิงถึงภาพอ้างอิง: พื้นหลังภาพ = URL เพื่อความชัดเจนเราจะให้คู่ของตัวอย่าง

ตารางที่มีภาพแทนพื้นหลัง: ตัวอย่าง HTML

วาดตาราง 2x3 และทำให้ภาพพื้นหลังที่เก็บไว้ในโฟลเดอร์ "ภาพ" (พื้นหลังโต๊ะ = "Images / picture.jpg") (TR) (TD) 1 (/ td) (TD) 2 (/ td) (TD) 3) (/ td) (/ TR) (TR) (TD) 4 (/ td) (TD) 5 (/ td) (TD) 6 (/ td) (/ TR) (/ ตาราง) ดังนั้นตารางของเราจะถูกวาดในพื้นหลังของภาพ

ตอนนี้วาดขนาดแผ่นเดียวกันของ 2x3 แต่แทรกภาพในคอลัมน์หมายเลข 1, 4, 5 และ 6 (ตาราง) (TR) (พื้นหลัง td = "Images / picture.jpg") 1 (/ td) (TD) 2 (/ td) (TD) 3 (/ td) (/ TR) (TR) (พื้นหลัง td = "Images / picture.jpg") 4 (/ td) (พื้นหลัง td = "Images / picture.jpg") 5 ( / td) (พื้นหลัง td = "Images / picture.jpg") 6 (/ td) (/ TR) (/ ตาราง) หลังจากที่ดูเราจะเห็นว่าพื้นหลังจะปรากฏเฉพาะในเซลล์เหล่านั้นในการที่เราจดทะเบียนและไม่ตารางทั้งหมด

เว็บไซต์เข้ากันได้ข้ามเบราว์เซอร์

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