คำสั่ง Background ใช้สำหรับทำหน้าที่อะไร

�������վ����ѧ��� background ��Ҥ�����͡�������������Ѻ ���˹ѧ��� ���������Ҿ��Сͺ��ҧ��������ྨ���� �ԩй�� �Ҩ���͡�Ҵ��š�

�����������Ѻ�����ѧ�դ���觴ѧ���仹��

<-- ������� bgcolor="�����" ��ͨҡ ����Դ��

���ͺ�բͧ�����ѧ

���Ѿ������

�͡�˹�ͨҡ��á�˹��괢ͧ�վ����ѧ����� ��Ẻ "#FFCCFF" ���ʤ�������� �ѧ����ö���С�˹��������Ẻ����ѡ��᷹���������µç��

���ͺ���������������µç

���Ѿ������

��ʹբͧ��á�˹������Ẻ��������µç��� �ӧ��� ����� �ҡ�����ҵ�ͧ��á�˹����������դ�����͹���ᵡ��ҧ�ѹ��� ���Ҩ�з�����������ùѡ �͡�ҡ�����ʤ����Ẻ������ҧ�á᷹

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

CSS : background

มาดูกันก่อนนะครับ ว่า background นั้น มันมีแบ่งย่อยอะไรบ้าง เพื่อเราจะได้รู้ว่า เราสามารถกำหนดอะไรให้คำสั่ง background ได้

• background-color : สีของพื้นหลัง
• background-image : รูปที่นำมาใช้เป็นพื้นหลัง
• background-repeat : คำสั่งนี้จะคู่กับ background-image เพื่อจะสั่งให้พื้นหลังนำรูปมาใช้ซ้ำ
• background-attachment : คำสั่งนี้ก็ใช้คู่กับ background-image เหมือนกัน เพื่อจะกำหนดรูปว่าให้อยู่กับที่ หรือเคลื่อนตาม
• background-position : คำสั่งนี้ก็ใช้คู่กับ background-image เช่นเดียวกัน โดยเป็นการกำหนดตำแหน่งเริ่มต้นที่รูปนี้จะไปอยู่

คราวนี้ เรามาดูวิธีการใช้ในแต่ละคำสั่งกันนะครับ

background-color

background-color นั้นใช้งานไม่ยากเลย มีวิธีการกำหนดสีหลัก ๆ อยู่ 3 แบบ ได้แก่

• ใช้ค่า HEX เช่น #ff0000
• ใช้ค่า RGB เช่น rgb(255,0,0)
• ใช้ชื่อสี เช่น red โดยชื่อสีนั้นไปดูได้ที่ ชื่อสีต่าง ๆ

มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้

<p style="background-color:#FF0000;">พื้นหลังสีแดง</p> <p style="background-color:rgb(0,0,255);">พื้นหลังสีน้ำเงิน</p> <p style="background-color:yellow">พื้นหลังสีเหลือง</p>

พื้นหลังสีแดง

พื้นหลังสีน้ำเงิน

พื้นหลังสีเหลือง

ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ

background-image

สำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ

background-image:url('รูปภาพที่จะใช้งาน');

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

โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า

background-image:url('out-facebook.png');

แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า

background-image:url('images/in-facebook.png');

คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง

background-image:url('../out-facebook.png');

การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้

background-image:url('../images/in-facebook.png');

ข้อสังเกตคือ ให้ยึดหลักว่าไฟล์ css ของเราอยู่ไหน แล้วเราก็จะทราบว่าต้อง url(‘XXXXX’) อย่างไร

แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น

ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ //rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า

background-image:url('//rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg');

เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

 

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

background-repeat

การที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ

bankjittapolPHP Super Member
Posts: 344Joined: 21/10/2019 10:19 am

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

• Report
• Quote

Post by bankjittapol » 28/11/2019 6:03 pm

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 2237 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 2237 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 2237 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 2237 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 2237 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 2237 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 สามารถผสมพื้นหลังตามหมวดต่างๆ


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

Top