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 ที่ใช้
โค้ด: เลือกทั้งหมด
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
โค้ด: เลือกทั้งหมด
background-color:red;
background-color:#000000;
background-color:rgb(255,130,255);
background-color:transparent;
background-color:initial;
background-image
โค้ด: เลือกทั้งหมด
background-image: url("รูปภาพ");
background-image: linear-gradient(red, yellow, blue);
โค้ด: เลือกทั้งหมด
background-position:left top;
background-position:50% 50%;
background-position:10px 200px;
background-size
โค้ด: เลือกทั้งหมด
background-size:auto;
background-size:100px 100px;
background-size:50%;
background-size:cover;
background-size:contain;
โค้ด: เลือกทั้งหมด
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-repeat:space;
background-repeat:round;
โค้ด: เลือกทั้งหมด
background-origin :padding-box;
background-origin :border-box;
background-origin :content-box;
โค้ด: เลือกทั้งหมด
background-clip :padding-box;
background-clip :border-box;
background-clip :content-box;
background-attachment
โค้ด: เลือกทั้งหมด
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-blend-mode
โค้ด: เลือกทั้งหมด
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;
อ้างอิง
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