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

สารบัญ

    แสดงสารบัญ

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

คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:

background-size
background-origin
background-clip

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following properties:

  • background-size
  • background-origin
  • background-clip

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

CSS อนุญาตให้คุณเพิ่มภาพพื้นหลังหลายรูปสำหรับองค์ประกอบหนึ่งๆ ผ่านทาง คุณสมบัติ ภาพพื้นหลัง

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

ตัวอย่างต่อไปนี้มีภาพพื้นหลังสองภาพ ภาพแรกเป็นดอกไม้ (ชิดด้านล่างและขวา) และภาพที่ 2 เป็นพื้นหลังกระดาษ (ชิดมุมซ้ายบน):

ตัวอย่าง

  #example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

สามารถระบุภาพพื้นหลังได้หลายภาพโดยใช้แต่ละภาพ คุณสมบัติพื้นหลัง (ตามด้านบน) หรือคุณสมบัติชวเลข พื้นหลัง

ตัวอย่างต่อไปนี้ใช้คุณสมบัติชวเลข พื้นหลัง (ผลลัพธ์เช่นเดียวกับ ตัวอย่างด้านบน):

ตัวอย่าง

  #example1 {
  background: url(img_flwr.gif) right bottom 
no-repeat, url(paper.gif) left top repeat;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

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

คุณสมบัติ CSS พื้นหลังขนาด ช่วยให้คุณสามารถระบุขนาดของภาพพื้นหลังได้

ขนาดสามารถระบุเป็นความยาว เปอร์เซ็นต์ หรือใช้อย่างใดอย่างหนึ่ง คำสำคัญ: มีหรือปก.

ตัวอย่างต่อไปนี้ปรับขนาดรูปภาพพื้นหลังให้เล็กกว่ารูปภาพต้นฉบับมาก (โดยใช้พิกเซล):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

นี่คือรหัส:

ตัวอย่าง

#div1
{
   
background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<p>Resized background-image:</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Original size of the background-image:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

อีกสองค่าที่เป็นไปได้สำหรับ พื้นหลัง-ขนาด คือ

contain
cover

คำหลัก contain จะปรับขนาดภาพพื้นหลังให้ใหญ่ที่สุดเท่าที่จะทำได้ (แต่ทั้งความกว้างและความสูงต้องพอดีกับพื้นที่เนื้อหา) ทั้งนี้ขึ้นอยู่กับสัดส่วนของพื้นหลังด้วย รูปภาพและพื้นที่การวางตำแหน่งพื้นหลังอาจมีบางพื้นที่ของ พื้นหลังที่ไม่ครอบคลุมโดยภาพพื้นหลัง

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

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ contain และ cover:

ตัวอย่าง

  #div1
{
    
background: url(img_flower.jpg);
    
background-size: contain;
  background-repeat: no-repeat;
}
#div2
{
    
background: url(img_flower.jpg);
    
background-size: cover;	background-repeat: no-repeat;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

.div2 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

.div3 {
  border: 1px solid black;
  height: 120px;
  width: 150px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

กำหนดขนาดของภาพพื้นหลังหลายภาพ

คุณสมบัติ พื้นหลังขนาด ยังยอมรับค่าหลายค่าสำหรับขนาดพื้นหลัง (ใช้รายการที่คั่นด้วยเครื่องหมายจุลภาค) เมื่อทำงานกับหลายพื้นหลัง

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

ตัวอย่าง

  #example1 {
  background: url(img_tree.gif) left top 
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top 
repeat;
  background-size: 50px, 130px, auto;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

ภาพพื้นหลังขนาดเต็ม

ตอนนี้เราต้องการมีภาพพื้นหลังบนเว็บไซต์ที่ครอบคลุมทั้งภาพ หน้าต่างเบราว์เซอร์ตลอดเวลา

ข้อกำหนดมีดังนี้:

  • เติมรูปภาพให้เต็มหน้า (ไม่มีช่องว่าง)

  • ปรับขนาดภาพตามต้องการ

  • ภาพตรงกลางหน้า

  • อย่าทำให้เกิดแถบเลื่อน

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

ตัวอย่าง

  html {
  background: url(img_man.jpg) no-repeat 
center fixed; 
  background-size: cover;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
html { 
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

รูปภาพฮีโร่

คุณยังสามารถใช้คุณสมบัติพื้นหลังที่แตกต่างกันบน <div> เพื่อสร้างภาพหลัก (ภาพขนาดใหญ่พร้อมข้อความ) และวางไว้ในตำแหน่งที่คุณต้องการ

ตัวอย่าง

  .hero-image {
  background: url(img_man.jpg) no-repeat center; 
  
   background-size: cover;
  height: 500px;
  position: 
   relative;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <h3>And I'm a Photographer</h3>
    <button>Hire me</button>
  </div>
</div>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>

</body>
</html>

คุณสมบัติต้นกำเนิดพื้นหลัง CSS

คุณสมบัติ CSS พื้นหลังกำเนิด ระบุตำแหน่งของภาพพื้นหลัง ตำแหน่ง

คุณสมบัติรับค่าที่แตกต่างกันสามค่า:

  • border-box - ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของเส้นขอบ

  • padding-box - (ค่าเริ่มต้น) ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของขอบการเติม

  • content-box - ภาพพื้นหลังเริ่มจากมุมซ้ายบนของเนื้อหา

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

ตัวอย่าง

 #example1
{
    border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
    
background-repeat: no-repeat;
  
background-origin: content-box;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
}

#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<h1>The background-origin Property</h1>

<p>No background-origin (padding-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

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

คุณสมบัติ พื้นหลังคลิป CSS ระบุพื้นที่การวาดภาพของพื้นหลัง

คุณสมบัติรับค่าที่แตกต่างกันสามค่า:

  • border-box - (ค่าเริ่มต้น) พื้นหลังจะถูกวาดไปที่ขอบด้านนอกของเส้นขอบ

  • padding-box - พื้นหลังถูกทาสีไปที่ขอบด้านนอกของ padding

  • content-box - พื้นหลังถูกทาสีภายในกล่องเนื้อหา

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ พื้นหลังคลิป:

ตัวอย่าง

  #example1
{
     border: 10px dotted black;
  
padding: 35px;
  background: yellow;
  
background-clip: content-box;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
}

#example2 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: padding-box;
}

#example3 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}
</style>
</head>
<body>

<h1>The background-clip Property</h1>

<p>No background-clip (border-box is default):</p>
<div id="example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

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

background

คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติพื้นหลังทั้งหมดในการประกาศเดียว

background-clip

ระบุพื้นที่การวาดภาพของพื้นหลัง

background-image

ระบุหนึ่งหรือหลายภาพพื้นหลังสำหรับองค์ประกอบ

background-origin

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

background-size

ระบุขนาดของภาพพื้นหลัง (s)