คอร์ส IT พื้นฐาน CSS 023_รูปภาพ, พื้นหลัง

รูปภาพ

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

เค้าโครงรูปภาพ

อิลิเมนต์ img เป็นอิลิเมนต์แบบอินไลน์โดยค่าเริ่มต้น และมีระยะห่างเริ่มต้น 5px โดยการตั้งค่าเป็นอิลิเมนต์แบบบล็อก จะแสดงรูปภาพได้เพียงหนึ่งรูปต่อบรรทัด โดยการตั้งค่าเป็นอิลิเมนต์แบบอินไลน์ จะแสดงรูปภาพหลายรูปในบรรทัดเดียวได้ สำหรับการจัดตำแหน่งอิลิเมนต์แบบบล็อกใช้คุณสมบัติ margin สำหรับการจัดตำแหน่งอิลิเมนต์แบบอินไลน์ใช้คุณสมบัติ text-align

ตัวอย่าง:

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

ผลลัพธ์:

ความโปร่งใสของรูปภาพ

ใน CSS คุณสามารถใช้คุณสมบัติ opacity เพื่อตั้งค่าความโปร่งใสของอิลิเมนต์ (รวมถึงรูปภาพ) คุณสมบัตินี้รับค่าตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบแสงทั้งหมด)

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

ตัวอย่าง:

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

ผลลัพธ์:

มุมโค้งของรูปภาพ

ใน CSS คุณสามารถใช้คุณสมบัติ border-radius เพื่อเพิ่มมุมโค้งให้กับรูปภาพ คุณสมบัตินี้ใช้สำหรับตั้งค่าระดับความโค้งของมุมเส้นขอบของอิลิเมนต์

ตัวอย่าง:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- ตั้งค่ารัศมีมุมโค้ง สามารถปรับได้ตามต้องการ -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- รัศมีแนวนอน 20px, รัศมีแนวตั้ง 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- ซ้ายบน 10px, ขวาบน 20px, ขวาล่าง 15px, ซ้ายล่าง 5px -->

ผลลัพธ์:

เงาของรูปภาพ

ใน CSS คุณสามารถใช้คุณสมบัติ box-shadow เพื่อเพิ่มเอฟเฟกต์เงาให้กับรูปภาพ คุณสมบัตินี้ช่วยให้คุณเพิ่มเอฟเฟกต์การฉายเงา รวมถึงสีเงา รัศมีการเบลอ ค่าออฟเซ็ต เป็นต้น

ตัวอย่าง:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- ออฟเซ็ตแนวนอน 5px, ออฟเซ็ตแนวตั้ง 5px, รัศมีการเบลอ 10px, สีเงาเป็นสีดำกึ่งโปร่งใส -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- เงาภายนอกและเงาภายใน ใช้คีย์เวิร์ด inset เพื่อระบุเงาภายใน -->

ผลลัพธ์:

พื้นหลัง

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

สีพื้นหลัง

สีพื้นหลังของอิลิเมนต์ตั้งค่าผ่านคุณสมบัติ background-color

ตัวอย่าง:

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

ผลลัพธ์:

รูปภาพพื้นหลัง

รูปภาพพื้นหลังของอิลิเมนต์ตั้งค่าผ่านคุณสมบัติ background-image สามารถใช้เส้นทางสัมพัทธ์ เส้นทางสัมบูรณ์ หรือ URL

ตัวอย่าง:

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

ผลลัพธ์:

การทำซ้ำพื้นหลัง (ปูกระเบื้อง)

คุณสมบัติ background-repeat ตั้งค่าโหมดการทำซ้ำของรูปภาพพื้นหลัง ซึ่งสามารถเป็นแนวนอน แนวตั้ง ทั้งสองทิศทาง หรือไม่ทำซ้ำ

• repeat: รูปภาพทำซ้ำทั้งแนวนอนและแนวตั้ง (ค่าเริ่มต้น)
• repeat-x: รูปภาพทำซ้ำในแนวนอน
• repeat-y: รูปภาพทำซ้ำในแนวตั้ง
• no-repeat: รูปภาพแสดงเพียงครั้งเดียว

ตัวอย่าง:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    ไม่ทำซ้ำ
2
    <div class="base example1"></div>
3
    ทำซ้ำแนวนอน
4
    <div class="base example2"></div>
5
    ทำซ้ำแนวตั้ง
6
    <div class="base example3"></div>

ผลลัพธ์:

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

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

• ค่าเริ่มต้น: แสดงรูปภาพพื้นหลังต้นฉบับอย่างสมบูรณ์
• auto: รูปภาพถูกปรับขนาดตามสัดส่วนเป็นพื้นหลัง รูปภาพจะถูกทำซ้ำปูกระเบื้อง
• cover: รูปภาพถูกขยายให้ครอบคลุมพื้นที่ทั้งหมด โดยรักษาสัดส่วน รูปภาพอาจไม่แสดงอย่างสมบูรณ์ บางส่วนอาจถูกตัดออก
• contain: รูปภาพถูกปรับขนาดให้ใหญ่ที่สุดเท่าที่เป็นไปได้โดยรักษาอัตราส่วนภาพ เพื่อให้ความสูงหรือความกว้างพอดีกับพื้นที่พื้นหลังทั้งหมด การปรับขนาดอาจทำให้เกิดพื้นที่ว่างในพื้นหลัง โดยพื้นที่ว่างของคอนเทนเนอร์จะแสดงสีพื้นหลังที่กำหนดโดย background-color

ตัวอย่าง:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

ผลลัพธ์:

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

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

• สามารถใช้หน่วยความยาวใดก็ได้ หากตำแหน่งที่สอง (ทิศทางแกน Y) ไม่ได้ประกาศ ค่าเริ่มต้นคือ 50% (หากทั้งสองตำแหน่งไม่ได้ตั้งค่า ค่าเริ่มต้นคือ 0% 0%)
• คีย์เวิร์ดตำแหน่ง (left/right/top/bottom/center) สามารถใช้เดี่ยวหรือคู่ได้ (หากคีย์เวิร์ดที่สองไม่ได้ประกาศ ค่าเริ่มต้นคือ center)
• ใช้แบบผสม

ตัวอย่าง:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

ผลลัพธ์:

การยึดติดพื้นหลัง (การตรึง)

คุณสมบัติ background-attachment ตั้งค่าว่ารูปภาพพื้นหลังจะคงที่หรือเลื่อนตามเนื้อหา

• scroll: รูปภาพพื้นหลังเคลื่อนที่ตามการเลื่อนหน้า (ค่าเริ่มต้น)
• fixed: รูปภาพพื้นหลังไม่เคลื่อนที่ตามการเลื่อนหน้า
• local: รูปภาพพื้นหลังเลื่อนตามเนื้อหาของอิลิเมนต์

ตัวอย่าง:

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

ผลลัพธ์:

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

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

ตัวอย่าง:

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}