ภาพพื้นหลัง CSS:คำแนะนำทีละขั้นตอน

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

ด้วย "ส่วนหัว" ของคลาส แท็กนี้แสดงข้อความ “Welcome to the Coffee Grind” บนหน้าเว็บ

ในไฟล์ CSS ของเรา เราได้กำหนดกฎสำหรับคลาส HTML ที่เรียกว่า “image” ตั้งค่าภาพพื้นหลังสำหรับแบนเนอร์ของเราและตั้งค่าความสูงของแบนเนอร์ของเราเป็น 250px จากนั้นเรากำหนดคลาสที่เรียกว่า “ส่วนหัว” ซึ่งใช้สำหรับจัดรูปแบบข้อความในส่วนหัวของเรา

คลาส "ส่วนหัว" ใช้ช่องว่างภายในขนาด 50px ที่ด้านบนของข้อความส่วนหัวของเรา คลาส "ส่วนหัว" กำหนดสีของข้อความเป็นสีขาว สไตล์ของเรากำหนดขนาดแบบอักษรของส่วนหัวเป็น 20px และจัดตำแหน่งส่วนหัวให้อยู่ตรงกลางขององค์ประกอบ

CSS หลายภาพพื้นหลัง

คุณสมบัติ background-image ให้คุณกำหนดภาพพื้นหลังหลายภาพให้กับองค์ประกอบใน CSS ไวยากรณ์สำหรับการใช้ภาพพื้นหลังหลายภาพมีดังนี้:

background-image: url(image1), url(image2);

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

index.html

<div class="image">
	<p class="header">Welcome to The Coffee Grind</p>
</div>

styles.css

.image {
	background-image: url(https://img.icons8.com/wired/64/000000/coffee.png), url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	height: 250px;
}

.header {
	padding-top: 50px;
	color: white;
	font-size: 20px;
	text-align: center;
}

รหัสของเราส่งคืน:

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

ขนาดภาพพื้นหลัง

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

คุณสมบัติขนาดพื้นหลังยอมรับค่าที่เป็นไปได้สี่ค่า เหล่านี้คือ:

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

การเปลี่ยนขนาดพื้นหลัง

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

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 250px;
}

รหัสของเราส่งคืน:

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

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

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	background-size: contain;
	height: 200px;
	width: 200px;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ รูปภาพของเรากว้าง 200px ยาว 200px

ภาพพื้นหลังของตำแหน่ง

คุณสมบัติ background-origin ช่วยให้คุณสามารถวางตำแหน่งภาพพื้นหลังตามเนื้อหา เส้นขอบ หรือ padding ขององค์ประกอบเว็บ

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

• Border-box:วางตำแหน่งรูปภาพให้สัมพันธ์กับกล่องเส้นขอบ
• กล่องเนื้อหา:วางตำแหน่งรูปภาพให้สัมพันธ์กับกล่องเนื้อหา
• Padding-box:วางตำแหน่งรูปภาพให้สัมพันธ์กับ Padding Box (ค่าเริ่มต้น)

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

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

index.html

<div class="image"></div>

styles.css

.image {
	background-image: url(https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
	border: 10px solid black;
	padding: 25px;
	background-origin: content-box;
	background-repeat: no-repeat;
	height: 250px;
}

รหัสของเราส่งคืน:

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

เราทำได้โดยการระบุคุณสมบัติ background-origin:content-box เราระบุคุณสมบัติ background-repeat:no-repeat คุณสมบัตินี้จำกัดรูปภาพของเราไว้ที่ช่องเนื้อหา รูปภาพจะไม่ปรากฏในพื้นที่ว่างที่สร้างโดยคุณสมบัติต้นทางพื้นหลัง

บทสรุป

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

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