คุณสมบัติ CSS ที่เกี่ยวข้องกับพื้นหลัง

Articles

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับพื้นหลัง

คุณสามารถเรียนรู้วิธีการกำหนดคุณสมบัติเช่น การตั้งค่าพื้นหลัง ตำแหน่ง และการทำซ้ำ

YouTube Video

สร้าง HTML สำหรับการพรีวิว

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

พื้นหลังและการตกแต่ง

คุณสมบัติ `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

คุณสมบัติ background-color ใช้ใน CSS เพื่อกำหนดสีพื้นหลังขององค์ประกอบ คุณสามารถกำหนดสีที่แสดงอยู่ด้านหลังข้อความและองค์ประกอบอื่น ๆ และสามารถกำหนดสีได้ในหลายรูปแบบ วิธีการกำหนดสีคล้ายกับคุณสมบัติ color แต่คุณสามารถกำหนดพื้นหลังให้โปร่งใสโดยสมบูรณ์ได้โดยใช้ transparent

คำอธิบาย:

red-example คลาสระบุสีพื้นหลังเป็นสีแดงโดยใช้คีย์เวิร์ด
hex-example คลาสระบุสีพื้นหลังโดยใช้รหัสเลขฐานสิบหก
rgb-example คลาสระบุสีพื้นหลังโดยใช้รูปแบบ RGB
rgba-example คลาสระบุสีพื้นหลังโดยใช้รูปแบบ RGBA และเพิ่มความโปร่งใส
hsl-example คลาสระบุสีพื้นหลังโดยใช้รูปแบบ HSL
hsla-example คลาสระบุสีพื้นหลังโดยใช้รูปแบบ HSLA และเพิ่มความโปร่งใส
transparent-example คลาสตั้งค่าพื้นหลังให้โปร่งใส

คุณสมบัติ `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

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

คำอธิบาย:

background-image-example คลาสใช้คุณสมบัติ background-image เพื่อกำหนด image.jpg เป็นพื้นหลัง background-size: cover ทำให้ภาพครอบคลุมทั้งส่วนขององค์ประกอบ และ background-position: center ทำให้ภาพอยู่ตรงกลาง การทำซ้ำจะถูกปิดใช้งานด้วย background-repeat: no-repeat
คลาส background-image-gradient ใช้ linear-gradient() เพื่อกำหนดพื้นหลังในรูปแบบเกรเดียนต์จากสีแดงถึงสีน้ำเงิน เกรเดียนต์จะแสดงจากซ้ายไปขวา

ประเภทของค่าที่สามารถระบุได้

คุณสมบัติ background-image สามารถรับค่าต่อไปนี้ได้

url(): ระบุ URL ของภาพพื้นหลัง ใส่ไฟล์ภาพลงใน url() (ex.url('image.jpg'))
none: ระบุว่าไม่ตั้งค่าภาพพื้นหลัง นี่คือค่าตั้งต้น
เกรเดียนต์: สามารถตั้งค่าเกรเดียนต์เป็นภาพพื้นหลังได้โดยใช้ฟีเจอร์เกรเดียนต์ของ CSS (ex.linear-gradient(), radial-gradient())

จุดสำคัญของคุณสมบัติ `background-image`

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

คุณสมบัติ `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

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

คำอธิบาย:

top-left-example คลาสระบุตำแหน่งภาพเป็น top left วางภาพที่มุมบนซ้าย
center-example คลาสกำหนดตำแหน่งภาพไว้ตรงกลางโดยใช้แอตทริบิวต์ center
bottom-right-example คลาสระบุตำแหน่งภาพเป็น bottom right วางภาพที่มุมล่างขวา

ประเภทของค่าที่สามารถระบุได้

คุณสมบัติ background-position สามารถรับประเภทค่าต่อไปนี้ได้

คำสำคัญ: คุณสามารถระบุ left, right, top, bottom, center ได้
- การระบุ center จะวางภาพพื้นหลังไว้ตรงกลางขององค์ประกอบ
- การระบุ right จะวางภาพพื้นหลังไว้ด้านขวา
- การระบุ top left จะวางภาพพื้นหลังไว้ที่มุมบนซ้าย
- การกำหนด bottom right จะวางภาพพื้นหลังไว้ที่มุมล่างขวา
ความยาวหรือเปอร์เซ็นต์: คุณสามารถกำหนดค่าได้ เช่น 10px 20px, 50% 50%
- การกำหนด 10px 20px จะวางภาพพื้นหลังห่างจากด้านซ้าย 10px และด้านบน 20px
- การกำหนด 50% 50% จะจัดวางภาพพื้นหลังให้อยู่ตรงกลางทั้งในแนวนอนและแนวตั้ง
ฟังก์ชัน calc(): ช่วยให้สามารถกำหนดตำแหน่งได้แม่นยำมากขึ้นโดยใช้การคำนวณ CSS

คุณสมบัติ `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

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

คำอธิบาย:

cover-example คลาสระบุว่าเป็น cover ภาพจะถูกขยายเพื่อคลุมองค์ประกอบทั้งหมด แต่บางส่วนของภาพอาจถูกตัดออก
contain-example คลาสระบุว่าเป็น contain ภาพจะถูกปรับให้พอดีกับองค์ประกอบ แต่พื้นที่ว่างอาจปรากฏขึ้น
fixed-size-example คลาสกำหนดขนาดคงที่สำหรับภาพพื้นหลัง โดยตั้งค่าความกว้างและความสูงอย่างละ 100px

ประเภทของค่าที่สามารถระบุได้

คุณสมบัติ background-size สามารถกำหนดค่าได้ดังต่อไปนี้

คำสำคัญ
- auto: รักษาขนาดค่าเริ่มต้นของภาพ (ความกว้างและความสูงถูกกำหนดอัตโนมัติ)
- cover: ปรับขนาดของภาพพื้นหลังให้ครอบคลุมองค์ประกอบทั้งหมด จะเติมเต็มองค์ประกอบทั้งหมด แต่บางส่วนของภาพอาจถูกตัด
- contain: ปรับภาพให้พอดีกับองค์ประกอบ แต่จะไม่คลุมองค์ประกอบทั้งหมด อัตราส่วนของภาพจะถูกคงไว้
ค่าตัวเลข (px, %, em, ฯลฯ)
- ความกว้างและความสูง: กำหนดความกว้างและความสูงอย่างชัดเจน หากกำหนดค่าเพียงค่าเดียว จะถูกใช้เป็นความกว้าง และความสูงจะถูกปรับอัตโนมัติ
- เปอร์เซ็นต์: กำหนดขนาดของภาพพื้นหลังเป็นเปอร์เซ็นต์ของขนาดองค์ประกอบ ตัวอย่างเช่น 50% 50% จะกำหนดให้รูปภาพมีขนาดกว้างและสูงครึ่งหนึ่งขององค์ประกอบ

คุณสมบัติ `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

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

คำอธิบาย:

repeat-example คลาสแสดงภาพซ้ำทั้งในแนวตั้งและแนวนอน
repeat-x-example คลาสแสดงภาพซ้ำเฉพาะในแนวนอน
no-repeat-example คลาสแสดงภาพเพียงครั้งเดียวโดยไม่ซ้ำ
space-example คลาสจัดระเบียบภาพพื้นหลังให้มีระยะห่างเท่ากัน
round-example คลาสปรับขนาดภาพพื้นหลังอัตโนมัติเพื่อทำซ้ำและเติมเต็มองค์ประกอบทั้งหมด

ค่าที่สามารถกำหนดได้

คุณสมบัติ background-repeat สามารถกำหนดค่าได้ดังต่อไปนี้

repeat: ภาพพื้นหลังจะถูกทำซ้ำทั้งในแกน X (แนวนอน) และแกน Y (แนวตั้ง) นี่คือค่าตั้งต้น
repeat-x: ภาพพื้นหลังจะถูกทำซ้ำเฉพาะในแกน X (แนวนอน)
repeat-y: ภาพพื้นหลังจะถูกทำซ้ำเฉพาะในแกน Y (แนวตั้ง)
no-repeat: ภาพพื้นหลังจะไม่ถูกทำซ้ำและแสดงเพียงครั้งเดียว
space: ภาพพื้นหลังจะถูกทำซ้ำในระยะห่างที่เท่ากันระหว่างแต่ละภาพ
round: ภาพพื้นหลังจะถูกทำซ้ำ และปรับขนาดเพื่อเติมเต็มพื้นที่ในองค์ประกอบ ภาพอาจถูกปรับขนาด

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติของ CSS ที่เกี่ยวข้องกับ Box Model คุณสมบัติ CSS ที่เกี่ยวข้องกับการตกแต่งในโครงร่างกล่อง (Box Model)

คุณสมบัติ CSS ที่เกี่ยวข้องกับพื้นหลัง

YouTube Video

สร้าง HTML สำหรับการพรีวิว

พื้นหลังและการตกแต่ง

คุณสมบัติ background-color

คำอธิบาย:

คุณสมบัติ background-image

คำอธิบาย:

ประเภทของค่าที่สามารถระบุได้

จุดสำคัญของคุณสมบัติ background-image

คุณสมบัติ background-position

คำอธิบาย:

ประเภทของค่าที่สามารถระบุได้

คุณสมบัติ background-size

คำอธิบาย:

ประเภทของค่าที่สามารถระบุได้

คุณสมบัติ background-repeat

คำอธิบาย:

ค่าที่สามารถกำหนดได้

YouTube Video

คุณสมบัติ `background-color`

คุณสมบัติ `background-image`

จุดสำคัญของคุณสมบัติ `background-image`

คุณสมบัติ `background-position`

คุณสมบัติ `background-size`

คุณสมบัติ `background-repeat`