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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

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 ที่ใช้

โค้ด: เลือกทั้งหมด

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-color สามารถใส่ ชื่อสี หรือโค้ดสี เช่น HEX RGB RGBA HSL และHSLA เป็นต้น
ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif.gif (12.19 KiB) Viewed 3070 times

background-image

โค้ด: เลือกทั้งหมด

background-image: url("รูปภาพ");
background-image: linear-gradient(red, yellow, blue);
ซึ่ง background-image สามารถใส่รูปได้มากกว่า 1 รูปได้ และยังสามารถ ใส่คำสั่ง linear-gradient ใล่ สีได้
ezgif.com-video-to-gif (1).gif
ezgif.com-video-to-gif (1).gif (43.31 KiB) Viewed 3070 times
background-position

โค้ด: เลือกทั้งหมด

background-position:left top;
background-position:50% 50%;
background-position:10px 200px;
ซึ่ง background-position สามารกกำหนด เป็นตำแหน่ง left top right bottom หรือ กำหนดเป็นค่าเปอร์เซ็น และกำหนดเป็นพิคเซลได้
ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif.gif (19.74 KiB) Viewed 3070 times

background-size

โค้ด: เลือกทั้งหมด

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
ezgif.com-video-to-gif (1).gif (140.41 KiB) Viewed 3070 times
background-repeat

โค้ด: เลือกทั้งหมด

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
ezgif.com-video-to-gif.gif (182.79 KiB) Viewed 3070 times
background-origin

โค้ด: เลือกทั้งหมด

background-origin :padding-box;
background-origin :border-box;
background-origin :content-box;
ซึ่ง background-origin สามารถกำหนดให้แสดงผลตำแหน่งให้พื้นหลังเริมแสดงที่ตำแหน่งไหนเช่น เริ่มแสดงตรงทำแหน่งของ border หรือเริ่มแสดงที่ตำแหน่งของเนื้อหา
ezgif.com-video-to-gif (1).gif
ezgif.com-video-to-gif (1).gif (21.1 KiB) Viewed 3070 times
background-clip

โค้ด: เลือกทั้งหมด

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

background-attachment

โค้ด: เลือกทั้งหมด

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

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;
ซึ่ง 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 57