CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง

[bankjittapol]

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

background เป็นคำสั่ง CSS ที่เกี่ยวข้องกับส่วนของพื้นหลัง ซึ่งสามารถ ใช้สีเป็นพื้นหลัง ใช้รูป กำหนดขนาดภาพพื้นหลัง ไล่สีพื้นหลัง เป็นต้น ซึ่งคำสั่ง background มีดังนี้
- background-color การกำหนดให้สีเป็นพื้นหลัง
- background-image การกำหนดให้รูปภาพใช้เป็นภาพพื้นหลัง
- background-position การกำหนดตำแหน่งให้กับพื้นหลัง
- background-size การกำหนดขนาดของพื้นหลัง
- background-repeat การกำหนดการแสดงซ้ำของพื้นหลัง
- background-origin การกำหนดพื้นที่ตำแหน่งให้กับพื้นหลัง
- background-clip การกำหนดระยะการแสดงผลของพื้นหลัง
- background-attachment การกำหนดว่าจะให้พื้นหลังเลื่อนไปตามหน้าจอที่มีอยู่ หรือตั้งให้คงที่
- background-blend-mode การกำหนดการผสมของพื้นหลัง

Syntax ที่ใช้

Code: Select all

background-color: color|transparent|initial|inherit;
background-image: url|none|initial|inherit;
background-position: value;
background-size: auto|length|cover|contain|initial|inherit;
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
background-origin: padding-box|border-box|content-box|initial|inherit;
background-clip: border-box|padding-box|content-box|initial|inherit;
background-attachment: scroll|fixed|local|initial|inherit;
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

การนำไปใช้งาน

background-color

Code: Select all

background-color:red;
background-color:#000000;
background-color:rgb(255,130,255);
background-color:transparent;
background-color:initial;

ซึ่ง background-color สามารถใส่ ชื่อสี หรือโค้ดสี เช่น HEX RGB RGBA HSL และHSLA เป็นต้น

ezgif.com-video-to-gif.gif (12.19 KiB) Viewed 605 times

background-image

Code: Select all

background-image: url("รูปภาพ");
background-image: linear-gradient(red, yellow, blue);

ซึ่ง background-image สามารถใส่รูปได้มากกว่า 1 รูปได้ และยังสามารถ ใส่คำสั่ง linear-gradient ใล่ สีได้

ezgif.com-video-to-gif (1).gif (43.31 KiB) Viewed 605 times

background-position

Code: Select all

background-position:left top;
background-position:50% 50%;
background-position:10px 200px;

ซึ่ง background-position สามารกกำหนด เป็นตำแหน่ง left top right bottom หรือ กำหนดเป็นค่าเปอร์เซ็น และกำหนดเป็นพิคเซลได้

ezgif.com-video-to-gif.gif (19.74 KiB) Viewed 605 times

background-size

Code: Select all

background-size:auto;
background-size:100px 100px;
background-size:50%;
background-size:cover;
background-size:contain;

ซึ่ง background-size สามารถกำหนด auto เพื่อให้แสดงขนาดจริงของพื้นหลัง หรือกำหนดเป็นพิกเซล หรือ เป็นเปอร์เซ็น หรือกำหนดให้ ขนาดเท่ากับเนื้อหาที่อยุ่ข้างในพื้นหลังทั้งหมด โดยใช้ cover หรือกำหนด หรือใช้ contain

ezgif.com-video-to-gif (1).gif (140.41 KiB) Viewed 605 times

background-repeat

Code: Select all

background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-repeat:space;
background-repeat:round;

ซึ่ง background-repeat สามารถกำหนดให้แสดงพื้นหลังซ้ำกันโดยใช้ repeat หรือกำหนดให้ทำซ้ำเฉพาะแกน x หรือ y หรือกำหนดไม่ให้มีการแสดงซ้ำ

ezgif.com-video-to-gif.gif (182.79 KiB) Viewed 605 times

background-origin

Code: Select all

background-origin :padding-box;
background-origin :border-box;
background-origin :content-box;

ซึ่ง background-origin สามารถกำหนดให้แสดงผลตำแหน่งให้พื้นหลังเริมแสดงที่ตำแหน่งไหนเช่น เริ่มแสดงตรงทำแหน่งของ border หรือเริ่มแสดงที่ตำแหน่งของเนื้อหา

ezgif.com-video-to-gif (1).gif (21.1 KiB) Viewed 605 times

background-clip

Code: Select all

background-clip :padding-box;
background-clip :border-box;
background-clip :content-box;

ซึ่ง background-clip จะมีการกำหนดเหมือนกับ background-origin แต่การแสดงผลนั้นแตกต่างกัน

background-attachment

Code: Select all

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

ซึ่ง background-attachment สามารถกำหนดให้พื้นหลังนั้นแสดงไปตาม scoll หรือ fixed ไว้ หรือ เคลื่อนที่ตามเนื้อหา

background-blend-mode

Code: Select all

 background-blend-mode:normal;
 background-blend-mode:multiply;
 background-blend-mode:screen;
 background-blend-mode:overlay;
 background-blend-mode:darken;
 background-blend-mode:lighten;
 background-blend-mode:color-dodge;
 background-blend-mode:saturation;
 background-blend-mode:color;
 background-blend-mode:luminosity;

ซึ่ง background-blend-mode สามารถผสมพื้นหลังตามหมวดต่างๆ


อ้างอิง
https://www.w3schools.com/cssref/css3_pr_background.asp
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background