CSS เป็นคำย่อของ Cascading Style Sheets เป็นภาษาการออกแบบที่เรียบง่าย แต่ทรงพลังที่มีความสามารถในการเปลี่ยนหน้าเว็บ พูดง่ายๆก็คือเพิ่มความคล่องตัวในการทำให้หน้าเว็บเป็นที่เรียบร้อยและดึงดูดผู้ใช้ด้วยความช่วยเหลือของ . ในบทความนี้เราจะเข้าใจวิธีการนำภาพพื้นหลังต่างๆไปใช้ใน CSS ตามลำดับต่อไปนี้:
- ภาพพื้นหลังในคุณสมบัติ CSS
- ภาพพื้นหลังใน CSS
- ทำซ้ำพื้นหลัง
- ไฟล์แนบพื้นหลัง
- ตำแหน่งพื้นหลัง
- ภาพพื้นหลังในขนาด CSS
- สีพื้นหลัง
ภาพพื้นหลังในคุณสมบัติ CSS
มีคุณสมบัติมากมายที่ใช้ในการควบคุมพฤติกรรมและการวางตำแหน่งของภาพ คุณสมบัติเหล่านี้คือ:
- ภาพพื้นหลัง
- พื้นหลังซ้ำ
- พื้นหลังไฟล์แนบ
- พื้นหลังตำแหน่ง
- ขนาดพื้นหลัง
- สีพื้นหลัง
เราจะทำความคุ้นเคยกับคุณสมบัติเหล่านี้และดูว่าจะใช้เมื่อใดและอย่างไรพร้อมกับการสาธิตที่น่าสนใจ
ภาพพื้นหลังใน CSS
ภาพพื้นหลัง คุณสมบัติตามชื่อที่แนะนำนั้นใช้เพื่อระบุและตั้งค่าภาพพื้นหลังผ่านองค์ประกอบในหน้าเว็บ ภาพพื้นหลังโดยค่าเริ่มต้นจะถูกวางไว้ที่มุมบนซ้ายขององค์ประกอบ
ไวยากรณ์: background-image: url | none | linear-gradient | radial-gradient
เนื้อความ {background-image: url ('apple.jpg')}พื้นหลังโดยใช้ url
มาทำความเข้าใจกับพารามิเตอร์:
- url: อินพุตของพารามิเตอร์นี้ช่วยให้เราระบุเส้นทางไฟล์ไปยังรูปภาพใด ๆ หรือ URL ไปยังรูปภาพที่ต้องตั้งค่าเป็นพื้นหลัง ในการประกาศมากกว่าหนึ่งภาพ URL จะถูกคั่นด้วยตัวคั่นลูกน้ำ
เนื้อความ {background-image: url ('apple.jpg')} 
goto c ++ ตัวอย่าง
- ไม่มี: นี่คือค่าดีฟอลต์ของคุณสมบัติและจะไม่มีการแสดงภาพพื้นหลังหากระบุค่าไว้
เนื้อความ {background: none}- การไล่ระดับสีเชิงเส้น (): ภาพพื้นหลังถูกตั้งค่าเป็นการไล่ระดับสีเชิงเส้น ต้องระบุสีอย่างน้อยสองสีสำหรับคุณสมบัตินี้นั่นคือสำหรับบนลงล่าง
body {background-color: # 001 background-image: linear-gradient (สีขาว 15%, โปร่งใส 16%), linear-gradient (สีขาว 15%, โปร่งใส 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- เรเดียลไล่ระดับ (): ภาพพื้นหลังถูกตั้งค่าเป็นการไล่ระดับแบบรัศมี ต้องระบุสีอย่างน้อยสองสีสำหรับคุณสมบัตินี้เช่นสำหรับกึ่งกลางถึงขอบ
body {background-color: # 001 background-image: radial-gradient (white 15%, transparent 16%), radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- การทำซ้ำ - linear-gradient (): มันทำซ้ำการไล่ระดับสีเชิงเส้น ให้เราใช้ตัวอย่างเดียวกับที่เราเห็นด้านบนในการไล่ระดับสีเชิงเส้นสำหรับการทำซ้ำ-linear-gradient และดูความแตกต่าง
เนื้อหา {background-color: # 001 background-image: การทำซ้ำ - ไล่ระดับสีแบบเชิงเส้น (สีขาว 15%, โปร่งใส 16%), การทำซ้ำ - ไล่ระดับสี (สีขาว 15%, โปร่งใส 16%) ขนาดพื้นหลัง: 60px 60px พื้นหลัง - ตำแหน่ง : 0 0, 30px 30px}- การทำซ้ำ - รัศมี - ไล่ระดับสี (): มันทำซ้ำการไล่ระดับสีแบบรัศมีให้เราสำรวจตัวอย่างเดียวกับที่เราใช้ด้านบนในการไล่ระดับสีแบบรัศมี
เนื้อหา {background-color: # 001 background-image: การทำซ้ำ - เรเดียล - ไล่ระดับสี (สีขาว 15%, โปร่งใส 16%), การทำซ้ำ - เรเดียล - ไล่ระดับสี (สีขาว 15%, โปร่งใส 16%) ขนาดพื้นหลัง: 60px 60px พื้นหลัง - ตำแหน่ง : 0 0, 30px 30px}พื้นหลังสำรอง
ขอแนะนำให้ใช้เป็นเคล็ดลับอย่างมืออาชีพในการเพิ่มสีพื้นหลังเป็นตัวเลือกสำรอง โดยเฉพาะอย่างยิ่งเมื่อไม่โหลดภาพพื้นหลังหรือพื้นหลังไล่ระดับสีที่เราตั้งไว้ในขณะที่กำลังพัฒนาไม่รองรับเบราว์เซอร์เก่าบางตัวที่ดูอยู่
สิ่งนี้ไม่ทำให้เสียประสบการณ์ของผู้ใช้และสามารถประกาศได้เช่นนี้:
เนื้อความ {background: url (apple_lost.jpg) สีชมพู}พื้นหลังหลายแบบ
นอกจากนี้เรายังมีตัวเลือกในการตั้งค่าภาพพื้นหลังหลายภาพและจำเป็นในกรณีส่วนใหญ่เช่นภาพพื้นหน้าและภาพพื้นหลัง ลำดับของรูปภาพมีความสำคัญที่นี่รูปภาพที่ควรอยู่ด้านหน้าจะถูกประกาศก่อนและรูปภาพที่ควรอยู่ด้านหลังสุดท้ายจะถูกประกาศถัดไป
ด้านล่างนี้เป็นตัวอย่างสำหรับภาพพื้นหลังหลายภาพ:
เนื้อความ {background-image: url ('small-heart.jpg'), url ('background.jpg')}ทำซ้ำพื้นหลัง
คุณสมบัติการทำซ้ำพื้นหลังถูกใช้ร่วมกับภาพพื้นหลังเพื่อกำหนดลักษณะการทำงานซ้ำของรูปภาพ ระบุว่าภาพพื้นหลังจะซ้ำหรือไม่และอย่างไร ภาพพื้นหลังตามค่าเริ่มต้นจะถูกทำซ้ำทั้งในแนวตั้งและแนวนอน
ค่าที่เป็นไปได้คือ:
- ทำซ้ำ - ภาพจะเล่นซ้ำทั้งแนวนอนและแนวตั้ง
- ไม่ทำซ้ำ - ภาพไม่ซ้ำ
- repeat-x - ภาพซ้ำในแนวนอน
- ซ้ำ -y - ภาพซ้ำในแนวตั้ง
- เว้นวรรค - ภาพซ้ำโดยเว้นช่องว่างหรือช่องว่างระหว่าง
- รอบ - ภาพซ้ำเพื่อเติมเต็มพื้นที่โดยไม่มีช่องว่างระหว่างภาพเหล่านี้
ไวยากรณ์ CSS สำหรับคุณสมบัติการทำซ้ำพื้นหลังคือ:
พื้นหลังซ้ำ: ซ้ำ | ซ้ำ -x | ซ้ำ -y | ไม่ซ้ำ | เว้นวรรค | รอบ
เนื้อหา {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}ไฟล์แนบพื้นหลัง
พื้นหลังไฟล์แนบ คุณสมบัติถูกใช้ร่วมกับภาพพื้นหลังเพื่อระบุว่ารูปภาพควรเลื่อนเมื่อมีการเลื่อนเนื้อหาหรือไม่ หมายความว่าภาพพื้นหลังควรได้รับการแก้ไขหรือควรเลื่อนไปพร้อมกับเอกสารโดยสัมพันธ์กับมุมมองหน้าต่างเบราว์เซอร์ ค่าเริ่มต้นคือการเลื่อน
ค่าที่เป็นไปได้คือ:
- เลื่อน - รูปภาพจะเลื่อนไปพร้อมกับหน้า
- คงที่ - รูปภาพจะไม่เลื่อนไปพร้อมกับหน้า
ไวยากรณ์ CSS สำหรับการแนบพื้นหลังคือ:
พื้นหลังไฟล์แนบ: เลื่อน | แก้ไข
เนื้อหา {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}ตำแหน่งพื้นหลัง
พื้นหลังตำแหน่ง คุณสมบัติใช้เพื่อแสดงตำแหน่งหรือการวางตำแหน่งของภาพพื้นหลัง ค่าที่เป็นไปได้คือ:
- ด้านบน
- ขวา
- ด้านล่าง
- ซ้าย
- ศูนย์
- การรวมกันของค่าเหล่านี้ (เช่นด้านซ้ายบน)
ไวยากรณ์ CSS สำหรับตำแหน่งพื้นหลังคือ:
ตำแหน่งพื้นหลัง: บน | ขวา | ซ้าย | ล่าง | กลาง
เนื้อหา {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}ภาพพื้นหลังในขนาด CSS
คุณสมบัตินี้มีประโยชน์มากที่สุดเนื่องจากช่วยให้เราสามารถควบคุมขนาดของภาพพื้นหลังได้ มีชุดค่าผสมที่แตกต่างกันที่เราสามารถใช้กับคุณสมบัตินี้และได้ผลลัพธ์ตามนั้น ค่าเริ่มต้นคืออัตโนมัติ
สามารถใช้ค่าต่อไปนี้กับ background-size:
- อัตโนมัติ
- ความยาว - ความสูงและความกว้างของภาพเช่น 20px 40px
- เปอร์เซ็นต์ - ความสูงและความกว้างของภาพเป็นเปอร์เซ็นต์ w.r.t องค์ประกอบหลักเช่น 50% 50%.
- center- จัดภาพให้อยู่ตรงกลาง
- ครอบคลุมปรับขนาดภาพให้ครอบคลุมพื้นที่พื้นหลังทั้งหมด
- มีการปรับขนาดภาพให้พอดีจนถึงความสูงและความกว้างจริง
ไวยากรณ์ CSS สำหรับตำแหน่งพื้นหลังคือ:
ขนาดพื้นหลัง: มูลค่า
เนื้อหา {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}เนื้อหา {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}สีพื้นหลัง
นี่เป็นคุณสมบัติที่ง่ายที่สุดใน CSS ที่ใช้ ใช้สีทึบกับพื้นหลังของหน้า ค่าสำหรับคุณสมบัตินี้สามารถระบุเป็นสี (เช่นสีแดงสีน้ำเงิน ฯลฯ ) ค่าฐานสิบหกและค่า RGB
ไวยากรณ์ CSS สำหรับสีพื้นหลังคือ:
สีพื้นหลัง: มูลค่า
เนื้อความ {background-image: url (small-heart.jpg) background-color: # 22a8e3}r การเรียนรู้ของเครื่องตามตัวอย่าง
นี่เป็นการสรุปคุณสมบัติทั้งหมดที่เราสามารถใช้กับพื้นหลังได้ เราสามารถลองใช้คุณสมบัติที่แตกต่างกันได้ตามที่เห็นในการสาธิตของเรา
CSS เป็นสิ่งสำคัญและต้องได้รับทักษะสำหรับนักพัฒนาเว็บส่วนหน้าทุกคน ช่วยในขณะออกแบบและจัดรูปแบบพื้นหลังและสร้างเว็บไซต์ที่น่าประทับใจและเสริมสร้างประสบการณ์ของผู้ใช้ วิธีที่ดีที่สุดคือการทดลองอย่างต่อเนื่องและใช้ประโยชน์จากเทคโนโลยีฟรอนต์เอนด์พิเศษนี้อย่างเต็มที่เนื่องจากสามารถทำสิ่งมหัศจรรย์และเปลี่ยนหน้าได้แบบไดนามิก
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'ภาพพื้นหลังใน CSS' แล้วเราจะติดต่อกลับไป