พื้นหลัง CSS คู่มือฉบับสมบูรณ์ พื้นหลังใน CSS (สี, ตำแหน่ง, รูปภาพ, ซ้ำ, ไฟล์แนบ) - ทุกอย่างสำหรับการตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังขององค์ประกอบ Html วิธีตั้งค่าสีพื้นหลังใน css

สวัสดีผู้อ่านที่รักของบล็อกไซต์ วันนี้เราจะมาดูกฎ CSS ห้าข้อที่อนุญาตให้คุณตั้งค่าพื้นหลังสำหรับองค์ประกอบใดๆ ใน Html - ตำแหน่งพื้นหลัง (รูปภาพ การทำซ้ำ สี ไฟล์แนบ) อย่าลืมพูดถึงกฎการผสมพื้นหลังด้วย

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

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

สี สีพื้นหลัง และภาพพื้นหลัง

มาดูวิธีการตั้งค่ากันก่อน สี HTMLองค์ประกอบที่ใช้ กฎสีของ CSS- ที่จริงแล้วทุกอย่างเรียบง่ายที่นี่ ไวยากรณ์เป็นเรื่องปกติโดยสมบูรณ์ และคุณสามารถตั้งค่าสีให้สอดคล้องกับวิธีการทำในภาษามาร์กอัปไฮเปอร์เท็กซ์ได้ ตามที่คุณจำได้วางไว้หลังเครื่องหมายแฮช (แฮช - “#fe35a3”) หรือใช้ตัวเลขสามหลักหากตัวแรกตรงกับค่าของวินาทีที่สามกับที่สี่และที่ห้าตามลำดับด้วยที่หก ( รหัสสี “#aa33ff” สามารถเขียนสั้นๆ ว่า "a3f")

นอกจากนี้ยังมีสีในรูปแบบ Html และ รหัสซีเอสสามารถแสดงเป็นคำได้ (เช่น "สีแดง") แต่ส่วนใหญ่มักจะเป็นรหัสฐานสิบหกที่ใช้:

สี:#303

ตามตัวอย่าง ฉันระบายสีย่อหน้าเล็กๆ นี้เป็นสีเดียวกับด้านบน (#303) ตอนนี้แตกต่างจากสีของย่อหน้าอื่นๆ ทั้งหมดเล็กน้อย (เข้มขึ้น) ซึ่งตั้งค่าเป็น #555 ในไฟล์ CSS ที่ฉันใช้ ธีมเวิร์ดเพรส- แต่การตั้งค่าสีโดยใช้สีนั้นค่อนข้างง่าย แต่ด้วยพื้นหลังจะซับซ้อนกว่าเล็กน้อย

ดังนั้น, สำหรับพื้นหลังใน Cssมีกฎห้าข้อที่สามารถรวมเป็นกฎเดียวได้หากต้องการ หากต้องการดู คุณสามารถไปที่หน้าข้อกำหนด W3C ปัจจุบัน และค้นหาอะไรก็ได้ที่มีคำว่าพื้นหลัง:

1. สีพื้นหลัง - เมื่อใช้กฎนี้ คุณจะตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ Html ใดๆ คุณสามารถใช้รหัสหรือชื่อของเฉดสีได้เช่น ทุกอย่างเหมือนกับตอนใช้สีทุกประการ

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

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

สีในสีพื้นหลังถูกตั้งค่าเป็นมาตรฐาน (รหัสเลขฐานสิบหกหกหรือสามหลักหรือคำ):

สีพื้นหลัง:#FEFCDE

ตัวอย่างเช่น พื้นหลังของย่อหน้านี้ถูกระบุโดยใช้สีพื้นหลังพร้อมรหัสสีที่ให้ไว้ด้านบน

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

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

ภาพพื้นหลัง: url (https://site/image/comment_top_focus.gif);

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

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

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

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

ดังนั้นด้วยการทำซ้ำพื้นหลังเราสามารถทำได้ จัดการการทำซ้ำภาพพื้นหลัง- กฎนี้สามารถมีได้สี่ความหมายเท่านั้น:




ตำแหน่งพื้นหลัง - การวางตำแหน่งพื้นหลัง

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



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

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

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

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

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

ภาพพื้นหลัง: url (https://site/image/logo.png); พื้นหลังซ้ำ: ไม่ซ้ำ; ตำแหน่งพื้นหลัง:400px 25px;

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

อย่างไรก็ตาม หากคุณตั้งค่าตำแหน่งพื้นหลังคงที่สำหรับองค์ประกอบต่างๆ เช่น Body หรือ Html (เช่น ในแท็กที่ครอบคลุมทั้งหน้าเว็บ) รูปภาพนี้จะมองเห็นได้ในวิวพอร์ตเสมอ และนี่คือการใช้ไฟล์แนบพื้นหลัง CSS อย่างแน่นอน คุณสมบัติในรูปแบบบล็อกที่ทันสมัย

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

PNG) ไม่ทำซ้ำ 50%;

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

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

สีพื้นหลัง:#FEFCDE

เขียน:

ความเป็นมา:#FEFCDE

เนื่องจากค่าอื่น ๆ ทั้งหมดของกฎรูปแบบสำเร็จรูปจะถูกใช้เป็นค่าเริ่มต้นและนั่นคือสิ่งที่คุณต้องการ

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

รูปแบบรายการ (ประเภท รูปภาพ ตำแหน่ง) - กฎ CSS สำหรับปรับแต่งลักษณะที่ปรากฏของรายการในโค้ด Html วิธีกำหนดค่าสีพื้นหลังสลับของแถวของตาราง รายการ และองค์ประกอบ Html อื่น ๆ บนไซต์โดยใช้คลาสหลอกที่ nth-child
ตำแหน่ง (สัมบูรณ์ สัมพัทธ์ และคงที่) - วิธีการ การวางตำแหน่ง HTMLองค์ประกอบใน CSS (กฎซ้าย, ขวา, บนและล่าง)
ลอยและชัดเจนใน CSS - เครื่องมือเค้าโครงบล็อก
การจัดตำแหน่งโดยใช้กฎ Z-index และ CSS Cursor เพื่อเปลี่ยนเคอร์เซอร์ของเมาส์
Padding, Margin และ Border - ตั้งค่าภายในและ ระยะขอบตลอดจนโครงทุกด้าน (บน, ล่าง, ซ้าย, ขวา)
แสดงผล (บล็อก ไม่มี อินไลน์) ใน CSS - ตั้งค่าประเภทการแสดงผลขององค์ประกอบ Html บนหน้าเว็บ
ลำดับความสำคัญใน Css และการเพิ่มขึ้นเนื่องจากความสำคัญ การผสมผสานและการจัดกลุ่มตัวเลือก สไตล์ผู้ใช้และผู้แต่ง
CSS - มันคืออะไร สไตล์ชีทแบบเรียงซ้อนเชื่อมต่อกันอย่างไร รหัส HTMLใช้สไตล์และลิงค์
แท็ก คลาส รหัส และตัวเลือกสากล รวมถึงตัวเลือกแอตทริบิวต์ใน CSS สมัยใหม่

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

เป็นไปได้ไหมที่จะใช้ HTML เพื่อตั้งค่าพื้นหลัง?

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

ดังนั้น เราจะใช้ Cascading Style Sheets (CSS) มีโอกาสอีกมากมายในการตั้งค่าพื้นหลัง วันนี้เราจะมาดูสิ่งพื้นฐานที่สุด

วิธีการตั้งค่าพื้นหลังโดยใช้ css?

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

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

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

ร่างกาย (สีพื้นหลัง: #D4E6B3; )

ต้องใส่รหัสนี้ในส่วนหัว สิ่งสำคัญคือไฟล์จะต้องอยู่ในโฟลเดอร์เดียวกัน

ภาพเป็นพื้นหลัง

ฉันจะใช้ไอคอนขนาดเล็กเป็นรูปภาพ ภาษา HTML:

มาสร้างบล็อกว่างพร้อมตัวระบุ:

ให้มิติและพื้นหลังที่ชัดเจน:

#bg( width: 400px; height: 250px; ภาพพื้นหลัง: url(html.png); )

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

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

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

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

ทำซ้ำ – ค่าเริ่มต้น รูปภาพจะถูกทำซ้ำทั้งสองด้าน

Repeat-x – ทำซ้ำบนแกน x เท่านั้น;

Repeat-y – ทำซ้ำตามแกน y เท่านั้น

ไม่ทำซ้ำ - ไม่ทำซ้ำเลย

คุณสามารถเขียนแต่ละค่าและดูว่าเกิดอะไรขึ้น ฉันจะเขียนมันแบบนี้:

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

ตอนนี้ทำซ้ำในแนวนอนเท่านั้น ถ้าตั้งไม่ซ้ำก็จะมีรูปเดียว

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

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

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

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

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

ตำแหน่งพื้นหลัง: ด้านบนขวา;

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

ตำแหน่งพื้นหลัง: 50% 50%;

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

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

สัญกรณ์ชวเลข

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

พื้นหลัง: #333 url(bg.jpg) ไม่ทำซ้ำ 50% 50%;

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

การควบคุมขนาดของภาพพื้นหลัง

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

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

ตอนนี้รูปภาพของฉันใช้พื้นที่ทั้งหมดในบล็อก แต่ฉันจะให้ขนาดพื้นหลังเป็น:

ขนาดพื้นหลัง: 80% 50%;

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

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

หน้าปก – รูปภาพจะถูกปรับขนาดเพื่อให้ด้านหนึ่งเต็มบล็อกอย่างน้อยที่สุด

บรรจุ – ปรับขนาดเพื่อให้รูปภาพพอดีกับบล็อกในขนาดสูงสุด

ข้อดีของค่าเหล่านี้คือไม่เปลี่ยนสัดส่วนของภาพปล่อยให้เหมือนเดิม

คุณควรเข้าใจด้วยว่าการยืดภาพอาจทำให้คุณภาพลดลงได้ ฉันสามารถยกตัวอย่างจากชีวิตและการฝึกฝนจริงของนักออกแบบเลย์เอาต์ได้ ทุกคนรู้และเข้าใจว่าเมื่อออกแบบเดสก์ท็อปคุณต้องปรับไซต์ให้เข้ากับความกว้างของจอภาพหลัก: 1280, 1366, 1920 หากคุณถ่ายภาพพื้นหลังที่มีขนาดเท่ากับ 1280 x 200 และอย่าให้ไว้ ขนาดพื้นหลังแล้วหน้าจอที่มีความกว้างมากขึ้น พื้นที่ว่างจะปรากฏขึ้น รูปภาพจะไม่เต็มความกว้างทั้งหมด

ในกรณี 99% สิ่งนี้ไม่เหมาะกับนักพัฒนาเว็บ เขาจึงตั้งค่าขนาดพื้นหลัง: cover เพื่อให้รูปภาพขยายจนสุดความกว้างสูงสุดของหน้าต่างเสมอ นี่เป็นเทคนิคที่ดีที่จะใช้ แต่ตอนนี้คุณจะพบกับปัญหาที่ผู้ใช้ที่มีหน้าจอกว้าง 1920 พิกเซลอาจเห็นคุณภาพของภาพที่ไม่ดีนัก

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

โดยทั่วไป นี่เป็นเพียง 1 ตัวอย่างวิธีใช้ความรู้ที่คุณได้รับในบทความนี้เมื่อจัดวางเค้าโครงจริง

พื้นหลังโปร่งแสงโดยใช้ CSS

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

ตามตัวอย่าง ฉันจะตั้งค่าทั้งหน้าเป็นพื้นหลังให้กับรูปภาพที่เราใช้ก่อนหน้านี้ในตัวอย่าง สำหรับบล็อกที่มีตัวระบุ bg ซึ่งเราทำการทดลองทั้งหมด เราจะตั้งค่าพื้นหลังโดยใช้รูปแบบการตั้งค่าสี rgba

อย่างที่ผมบอกไปก่อนหน้านี้ การตั้งค่าสีใน CSS มีหลายรูปแบบ หนึ่งในนั้นคือ rgb ซึ่งเป็นรูปแบบที่รู้จักกันดีสำหรับผู้ที่ทำงานด้วย บรรณาธิการกราฟิก- มันเขียนแบบนี้: rgb(17, 255, 34);

ค่าแรกในวงเล็บคือความอิ่มตัวของสีแดง ตามด้วยสีเขียว และสีน้ำเงิน ค่าสามารถเป็นตัวเลขได้ตั้งแต่ 0 ถึง 255 ดังนั้นรูปแบบ rgba จึงไม่แตกต่างกันมีเพียงพารามิเตอร์เดียวเท่านั้นที่ถูกเพิ่ม - ช่องอัลฟา ค่าสามารถเป็นตั้งแต่ 0 ถึง 1 โดยที่ 0 คือความโปร่งใสทั้งหมด

ข้อมูลโดยย่อ

เวอร์ชัน CSS

ค่านิยม

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

HTML5 CSS2.1 IE Cr Op Sa Fx

ภาพพื้นหลัง

โมเดลวัตถุ

document.getElementById("elementID ").style.พื้นหลังImageเบราว์เซอร์

อินเทอร์เน็ตเอ็กซ์พลอเรอร์

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

หากองค์ประกอบได้รับการตั้งค่าให้เลื่อนหรืออัตโนมัติ Internet Explorer 8 จะมีความล่าช้าในแนวตั้งหนึ่งพิกเซลเมื่อพื้นหลังเลื่อน Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอด

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

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

อินเทอร์เน็ตเบราว์เซอร์

Explorer, Opera และ Firefox แสดงพื้นหลังของบรรทัดอย่างถูกต้อง (รูปที่ 2)

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

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

สีพื้นหลัง

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

P (สีพื้นหลัง: สีแดง;) p (สีพื้นหลัง: #f00;) p (สีพื้นหลัง: #ff0000;) p (สีพื้นหลัง: rgb(255, 0, 0;))

CSS3 รองรับความโปร่งใส ดังนั้นเราจึงสามารถเพิ่มมันลงในสีของเราได้ เช่น:

P (สีพื้นหลัง: rgba(255, 0, 0, 0.5);)

ตัวเลขสุดท้ายตั้งค่าความโปร่งใสเป็น 50% คุณสามารถตั้งค่าความโปร่งใสได้ตั้งแต่ 0 (พื้นหลังโปร่งใสโดยสมบูรณ์) ถึง 1 (ทึบแสงโดยสมบูรณ์)

ภาพพื้นหลัง

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

เนื้อความ (ภาพพื้นหลัง: url("image1"), url("image2"), url("image3")

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

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

การรองรับภาพพื้นหลังหลายภาพนั้นค่อนข้างกว้างขวาง เบราว์เซอร์ทั้งหมด แม้แต่ IE8 ก็รองรับคุณสมบัตินี้