ภาพพื้นหลัง. ภาพพื้นหลัง วิธีแทรกพื้นหลังในหน้า html

Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอด

none ปิดการใช้งานภาพพื้นหลังสำหรับองค์ประกอบ

ข้อมูลโดยย่อ เวอร์ชัน CSS ค่านิยม url ค่าคือเส้นทางไปยังไฟล์กราฟิกซึ่งระบุไว้ภายในโครงสร้าง url() เส้นทางไปยังไฟล์สามารถเขียนด้วยเครื่องหมายคำพูด (คู่หรือเดี่ยว) หรือไม่ก็ได้ none ปิดการใช้งานภาพพื้นหลังสำหรับองค์ประกอบ HTML5 CSS2.1 IE Cr Op Sa Fx ภาพพื้นหลัง แบบจำลองวัตถุ document.getElementById("elementID ").style.พื้นหลังImage เบราว์เซอร์ Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 จะใช้พื้นหลังกับขอบด้านในขององค์ประกอบที่มีชุดคุณสมบัติ hasLayout หากองค์ประกอบไม่มี hasLayout คุณสมบัติ background-image จะเคารพเส้นขอบขององค์ประกอบตามที่ระบุไว้ในข้อกำหนด ความแตกต่างในการแสดงผลจะสังเกตเห็นได้ชัดเจนหากขอบเป็นเส้นประหรือจุดแทนที่จะเป็นเส้นทึบ หากองค์ประกอบได้รับการตั้งค่าให้เลื่อนหรืออัตโนมัติ Internet Explorer 8 จะมีความล่าช้าในแนวตั้งหนึ่งพิกเซลเมื่อพื้นหลังเลื่อน

1

2

3

) จากนั้น Chrome, Safari, iOS จะแสดงผลไม่เป็นไปตามที่กำหนดในข้อกำหนด กล่าวคือ สำหรับแต่ละเซลล์แยกกัน ในขณะที่เบราว์เซอร์ควรแสดงพื้นหลังทึบสำหรับทั้งแถว ตัวอย่างที่ 2 แสดงรหัสที่แสดงให้เห็นถึงข้อผิดพลาด

ความเป็นมาของ TR

ผลลัพธ์ของตัวอย่างนี้ในเบราว์เซอร์ Chrome จะแสดงในรูป 1. เบราว์เซอร์ Internet Explorer, Opera และ Firefox แสดงพื้นหลังของบรรทัดอย่างถูกต้อง (รูปที่ 2)

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

หากคุณสังเกตเห็น นักธุรกิจออนไลน์ส่วนใหญ่ใช้พื้นหลังที่เป็นเอกลักษณ์ในหน้าการขายและการสมัครสมาชิกของตน วันนี้เราจะวิเคราะห์องค์ประกอบทางเทคนิคของกระบวนการนี้

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

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

หากคุณไม่มีปัญหากับภาษาอังกฤษคุณจะเข้าใจได้โดยไม่ยาก

ในบทความนี้ฉันได้เลือกหัวข้อแล้วเรียกว่าทวีด คุณสามารถดาวน์โหลดได้

นี่คือสิ่งที่ดูเหมือนในเวอร์ชันขนาดเล็กบนเว็บไซต์

ขั้นแรกให้สร้างเอกสารใหม่ในโปรแกรม

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

นอกจากนี้ในโฟลเดอร์หลัก "ไซต์ของฉัน" คุณต้องสร้างโฟลเดอร์ย่อยอีกสองโฟลเดอร์โดยโฟลเดอร์หนึ่งเราจะวางรูปภาพทั้งหมดของเราและจะเรียกว่า "รูปภาพ" และอีกโฟลเดอร์หนึ่งเราจะตั้งชื่อ "CSS" (สไตล์แบบเรียงซ้อน) แผ่นงาน) และวางไฟล์ไว้ที่นั่น สไตล์.css

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

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

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

มิฉะนั้น หากมีการเข้ารหัสอื่น เช่น windows-1251 ข้อความของเอกสารในเบราว์เซอร์จะแสดงเป็นอักษรอียิปต์โบราณ คุณสามารถเปลี่ยนการเข้ารหัสได้ในส่วน "การเข้ารหัส – เข้ารหัสใน Utf-8 (ไม่มี BOM)" บนแถบเครื่องมือของโปรแกรม

และอย่าลืมบันทึกทุกการกระทำที่เราทำ

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

วิธีนี้จะทำให้คุณคุ้นเคยกับลำดับการกระทำที่ถูกต้อง คุณไม่ควรจัดการกับสไตล์โดยตรงในเอกสาร html ควรใส่ไว้ในเอกสารแยกต่างหาก

ในการดำเนินการนี้ ในโปรแกรม Notepad++ ของเรา เราจะสร้างไฟล์อื่นและเรียกมันว่า Style.css และบันทึกลงในโฟลเดอร์ css ใหม่ ซึ่งจะอยู่ในโฟลเดอร์แชร์ “ไซต์ของฉัน”

ยอดเยี่ยม! เพื่อให้เบราว์เซอร์ของเราแสดงเพจได้อย่างถูกต้อง เราจำเป็นต้องเชื่อมต่อสไตล์ชีตกับเอกสาร html ของเรา นี่คือวิธีการทำ

เราป้อนทั้งบรรทัดด้านบนโดยตรง ด้วยบรรทัดนี้ เราจึงเชื่อมต่อสไตล์ชีตของเรา
ตอนนี้เราจะกำหนดภาพพื้นหลังสำหรับแท็กเนื้อหาของเราผ่านสไตล์ชีต ในการทำสิ่งนี้ เราสร้างโครงสร้างต่อไปนี้ในเอกสาร style.css (เพียงนำไปใช้และเขียนลงในโค้ดโปรแกรม)

ให้ฉันอธิบายเล็กน้อยที่นี่ แอตทริบิวต์พื้นหลังมีค่าหลายค่า หนึ่งในนั้นคือพื้นหลังซ้ำ ซึ่งทำหน้าที่ขยายภาพพื้นหลังของเราสำหรับเอกสารเว็บ

พื้นหลัง-ทำซ้ำ:

ทำซ้ำ //(ยืดในแนวนอนและแนวตั้ง) REPEAT-X // (ยืดในแนวนอนเท่านั้น) REPEAT-Y //(ยืดแนวตั้งเท่านั้น) NO-REPEAT //(อย่าทำซ้ำภาพพื้นหลัง)

ในกรณีของเรา เราจำลองภาพเล็กๆ ของเราทั้งแนวตั้งและแนวนอน เป็นผลให้ทั้งหน้าเต็มไปด้วยภาพของเรา นี่คือลักษณะที่ปรากฏในเบราว์เซอร์:

ฉันยังได้เลือกไซต์สำหรับคุณโดยเฉพาะซึ่งคุณสามารถดาวน์โหลดพื้นหลังที่สวยงามสำหรับไซต์ได้

การแนะนำ

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

CSS มาช่วยเรา

ดังที่คุณอาจเดาได้ เราจะตั้งค่าพื้นหลังโดยการเพิ่มสไตล์ CSS ให้กับออบเจ็กต์ html คุณสมบัติพื้นหลังสากลมีหน้าที่ในการแสดงพื้นหลังขององค์ประกอบ หากคุณต้องการเพิ่มพื้นหลังให้กับองค์ประกอบใดองค์ประกอบหนึ่ง ให้เพิ่มคุณสมบัติ CSS ให้กับรหัสหรือคลาสของมัน หากเป็นทั้งไซต์ ให้ไปที่แท็ก body หรือตัวระบุ (คลาส) ของคอนเทนเนอร์ (wrapper) หากซ้อนทับกับเนื้อหา ในบทความนี้ ในตัวอย่าง เราจะทำงานกับองค์ประกอบเนื้อหา

เติมสี

เริ่มจากสิ่งที่ง่ายที่สุด - เติมสีที่ต้องการ ในการทำเช่นนี้ เราเพียงต้องทราบรหัสสีและสีพื้นหลังของคุณสมบัติ CSS เท่านั้น

Body ( background-color: #000; /* เติมพื้นหลังด้วยสีดำ */ )

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

หากคุณใช้การเติมพื้นหลังกับองค์ประกอบเฉพาะ เช่น ส่วนหัว (h1-h6) ย่อหน้า (p) ฯลฯ ตรวจสอบให้แน่ใจว่าสีข้อความจะไม่กลมกลืนกับพื้นหลังและจะไม่สูญเสียความสามารถในการอ่าน ใช้คุณสมบัติสีเพื่อเปลี่ยนสีของข้อความ

P ( background-color: #000; /* เติมพื้นหลังด้วยสีดำ */ color: #fff; /* ข้อความสีขาวสำหรับพื้นหลังสีดำ */ )

ภาพพื้นหลัง

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

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

ร่างกาย ( background-image: url(/images/พื้นหลัง.png); /* เส้นทางที่แน่นอนไปยังภาพพื้นหลัง background.png */ )

หากใช้รูปภาพพื้นหลัง ขอแนะนำให้ระบุการเติมสีพร้อมกัน (ด้วยคุณสมบัติ background-color) ในกรณีนี้ หากรูปภาพไม่โหลด (รูปภาพไม่พร้อมใช้งานด้วยเหตุผลบางประการ; ผู้ใช้ปิดใช้งานการแสดงรูปภาพ) หรือโหลดโดยมีความล่าช้า (รูปภาพโหลดช้ากว่าหน้าทั้งหมด) จากนั้นพื้นหลังจะเติม จะแสดงแทนรูปภาพหรือจนกว่าจะโหลดเสร็จ

เนื้อความ ( background-image: url(/images/ground.png); /* เส้นทางที่แน่นอนไปยังภาพพื้นหลัง background.png */ background-color: #ab11cf; /* เติมพื้นหลังด้วยสีเฉพาะ */ )

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

เนื้อความ ( พื้นหลัง: #ab11cf url(/images/พื้นหลัง.png); /* เติมสีและเส้นทางไปยังภาพพื้นหลัง */ )

คุณสมบัติพื้นหลัง

คุณสมบัติพื้นหลังทั่วไปช่วยให้คุณสามารถตั้งค่าตัวเลือกการแสดงภาพพื้นหลังทั้งหมดในบรรทัดเดียว ลองดูตัวเลือกที่มีอยู่

พื้นหลัง: | สืบทอด

ลำดับของค่าสามารถกำหนดเองได้ และหากไม่ได้ระบุคุณสมบัติ ระบบจะใช้ค่าเริ่มต้น

สิ่งที่แนบมากับพื้นหลัง

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

ร่างกาย ( background-image: url(/images/พื้นหลัง.png); /* เส้นทางที่แน่นอนไปยังภาพพื้นหลัง background.png */ การแนบพื้นหลัง: แก้ไขแล้ว; /* แก้ไขรูปภาพแล้ว */ สีพื้นหลัง: #ab11cf; /* เติมพื้นหลังด้วยสีเฉพาะ */ )

เทียบเท่า:

เนื้อความ ( พื้นหลัง: #ab11cf url(/images/พื้นหลัง.png) คงที่; /* เติมสีและเส้นทางไปยังภาพพื้นหลังคงที่ */ )

ตำแหน่งพื้นหลัง

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

พื้นหลังซ้ำ

กำหนดวิธีการแสดงภาพพื้นหลังซ้ำ สามารถทำซ้ำได้เฉพาะในแนวนอน (ซ้ำ-x) หรือเฉพาะแนวตั้ง (ซ้ำ-y) หรือพร้อมกันในแนวนอนและแนวตั้ง (ซ้ำ) หรือไม่มีการซ้ำเลย (ไม่ซ้ำ) ค่าเริ่มต้นคือการทำซ้ำ

สืบทอด

ใช้เพื่อระบุการสืบทอดคุณสมบัติจากองค์ประกอบหลักอย่างชัดเจน

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

เปิดไฟล์ HTML ของคุณโดยใช้ Notepad หรือโปรแกรมแก้ไขข้อความอื่น ๆ ที่คุณคุ้นเคย

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

พารามิเตอร์ bgcolor=”******” โดยที่ ***** คือรหัสสี คุณสามารถค้นหาสีสำหรับ HTML ในโปรแกรมแก้ไขกราฟิกใด ๆ โดยเลือกตัวเลือก "สำหรับเว็บ" หรือบนเว็บไซต์ https://colorscheme.ru/color-names

คุณเพียงแค่ต้องเลือกสีในจานสีวงกลมและกำหนดความเข้มของมันภายในสี่เหลี่ยมจัตุรัส ทางด้านขวาคุณจะเห็นรหัส html สองรหัส คัดลอกและวางลงในแผ่นจดบันทึก

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

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

ตอนนี้ค้นหาตำแหน่งของไฟล์โดยคลิกขวาที่ไฟล์ เลือก "เปิดด้วย" และคลิกที่เบราว์เซอร์ใด ๆ ที่ติดตั้งบนคอมพิวเตอร์ของคุณ

คัดลอกที่อยู่จากแถบค้นหาของเบราว์เซอร์ของคุณ ตอนนี้อยู่ในแท็ก

• เข้าบรรทัด:

style=”ภาพพื้นหลัง: url('file:///C:/Users/FILE_PATH.jpg')”

บันทึกไฟล์ของคุณ

ตรวจสอบหน้าเว็บของคุณ คุณจะเห็นว่าพื้นหลังถูกแทนที่ด้วยข้อความของคุณแล้ว

• พื้นหลังซ้ำ : “คุณค่า” ตัวเลือกสำหรับค่าของคุณอาจเป็น: “repeat-x” – ทำซ้ำภาพพื้นหลังของคุณทั้งแนวนอนและแนวตั้ง “repeat-y” – การทำซ้ำในแนวตั้งเท่านั้น “no-repeat” – ภาพหยุดนิ่งและไม่เกิดซ้ำ “ช่องว่าง” – ทั้งหน้าจะเต็มไปด้วยจำนวนสำเนาสูงสุดของรูปภาพ โดยส่วนนอกสุดจะถูกครอบตัด “กลม” – ตัวเลือกเดียวกัน แต่ขอบของภาพจะถูกปรับขนาดอย่างระมัดระวัง
• ไฟล์แนบพื้นหลัง: “คุณค่า” หากคุณแทนที่แท็ก “scroll” แทนคำว่า Value รูปภาพจะเลื่อนไปพร้อมกับไซต์ “คงที่” – พื้นหลังยังคงไม่เปลี่ยนแปลงเมื่อเลื่อน
• ขนาดพื้นหลัง: ค่า Value2 ที่นี่ค่าจะต้องรับค่าเป็นพิกเซล ตัวอย่างเช่น: 100px 200px นอกจากพิกเซลแล้ว ยังยอมรับค่าเปอร์เซ็นต์อีกด้วย นี่คือตัวเลือกในการเติมรูปภาพลงในหน้า นอกจากตัวเลขแล้ว คุณสามารถป้อนพารามิเตอร์ได้ 2 ตัว ได้แก่ “contain” – เติมหน้าด้วยรูปภาพตามด้านยาว และ “cover” – เติมหน้าด้วยรูปภาพตามความกว้าง

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

2 โหวต

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

ฉันจะพูดถึงความแตกต่างบางอย่างที่จะทำให้พื้นหลังมีความสม่ำเสมอและสวยงามยิ่งขึ้น เรามาเริ่มกันเลยดีมั้ย?

การเลือกรูปภาพ

ฉันต้องการเริ่มต้นด้วยการเลือกภาพ เพื่อให้คุณดูสม่ำเสมอและสวยงามมากขึ้นบนหน้า และคุณไม่ต้องกังวลกับขนาดและการจัดแนว ฉันแนะนำให้มองหาพื้นผิวที่ไร้รอยต่อทันที มันคืออะไร?

ขออภัย ไม่สามารถขยายรูปภาพเป็น html ให้เต็มหน้าจอได้ ภาพถ่ายใช้ในขนาดจริง หากภาพมีขนาดเล็กก็จะครอบคลุมพื้นที่ทั้งหมดดังภาพหน้าจอด้านล่าง หากต้องการขยายรูปภาพ คุณจะต้องสร้างเอกสาร CSS เพิ่มเติม หากไม่มีสิ่งนี้ก็จะไม่ทำงาน

แม้ว่าคุณจะมีโอกาสเลี่ยงผ่านระบบก็ตาม ในการดำเนินการนี้ ให้ใช้ Photoshop และรูปภาพที่มีความกว้างของหน้าจอ (1280x720) แม้ว่าในกรณีนี้เมื่อเลื่อนลงภาพจะเข้ามาแทนที่อีกภาพ

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

หากคุณสนใจที่จะไม่มีผลกระทบทางกฎหมายต่อการใช้งาน ฉันขอแนะนำให้ค้นหาในเว็บไซต์ Pixabay.com .

HTML

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

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

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

คุณสามารถเปิดแผ่นจดบันทึกและคัดลอกรหัสนี้ ในเครื่องหมายคำพูด ให้ใส่ลิงก์ไปยังรูปภาพที่คุณต้องการ

<html > <หัว > <หัวเรื่อง >ภาพพื้นหลัง</หัวเรื่อง> </หัว> <พื้นหลังร่างกาย = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </ตัว> </html>

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

คัดลอก URL นี้ทุกประการ

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

เสร็จแล้วหน้าจะเต็มไปด้วยสีอื่น

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ html ฉันขอแนะนำให้คุณดาวน์โหลด หลักสูตรฟรีโดย Evgeniy Popov - จากนั้น คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับแท็ก ความสามารถด้านภาษา ลองใช้เทคนิคใหม่ๆ และทราบข้อมูลเพิ่มเติม

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

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

ไม่เห็นด้วยกับฉันเหรอ? ฉันสามารถเสนอทางเลือกอื่นได้ หนังสือโดย เอลิซาเบธ และเอริกา ฟรีแมน การเรียนรู้ HTML, XHTML และ CSS - ไม่ใช่หนังสือขายดีที่น่าเบื่อมากและเปิดตัวเมื่อไม่นานมานี้ในปี 2559 ข้อมูลยังไม่ล้าสมัย

ซีเอสเอส

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

CSS ช่วยแก้ปัญหานี้ คุณต้องสร้างไฟล์ที่มีนามสกุล css และป้อนรหัสต่อไปนี้:

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

สำหรับผู้ที่ต้องการที่จะรู้ดีขึ้น

ด้วย CSS คุณสามารถยืดออกได้ ภาพพื้นหลังตรวจสอบให้แน่ใจว่ามันจะไม่เกิดซ้ำ เพิ่มภาพเคลื่อนไหว GIF และอื่นๆ อีกมากมาย

คุณไม่สามารถเขียนทุกอย่างในบทความเดียวได้ และฉันไม่ได้กำหนดงานดังกล่าวให้กับตัวเอง มีรายละเอียดปลีกย่อยมากมายและหากพวกเขาสัญญาว่าจะบอกคุณทุกอย่างในบทความเดียวนี่ก็ไม่มีอะไรมากไปกว่าการหลอกลวง

คุณต้องการเรียนรู้วิธีเขียนเว็บไซต์อย่างถูกต้องหรือไม่? ฉันแนะนำให้คุณเรียนรู้ภาษาการเขียนโปรแกรม ผมขอแนะนำหลักสูตรของ Andrey Bernatsky ได้เลย” HTML5 และ CSS3 จาก Zero ถึง Pro - ฉันชอบนักเขียนคนนี้มาก ฉันไม่ได้เรียนหลักสูตรนี้เมื่อหลายปีก่อนมีบางอย่างที่คล้ายกัน แต่ทันสมัยน้อยกว่า

ผู้เขียนพูดได้ดีมาก ทุกอย่างเข้าใจง่ายและเข้าใจง่าย จุดเด่นของหลักสูตรนี้คือคุณไม่เพียงแค่เรียน แต่คุณได้สร้างเว็บไซต์เฉพาะร่วมกับอาจารย์ ผลลัพธ์ก็คือคุณจะได้รับนามบัตร บล็อก และแม้แต่ร้านค้าออนไลน์ เจ๋งมาก. คุณสามารถดูบทเรียนเชิงทฤษฎีสามบทแรกเกี่ยวกับ HTML5 ได้จากหลักสูตรนี้ที่นี่และตอนนี้

นอกจากหลักสูตรนี้คุณจะได้รับโบนัส 7 รายการ: พื้นฐานของ html และ css โดย Andrei Bernatsky, เลย์เอาต์สำหรับผู้เริ่มต้น, การสร้างหน้า Landing Page ในตอนเย็นและอีกมากมาย ก่อนจะลงมือฝึกอย่างจริงจัง ทดลองเรียนหลักสูตรฟรี" ฝึกฝน HTML5 และ CSS3 ».

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

 

---

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