�������վ����ѧ��� background ��Ҥ�����͡�������������Ѻ ���˹ѧ��� ���������Ҿ��Сͺ��ҧ��������ྨ���� �ԩй�� �Ҩ���͡�Ҵ��š� Show �����������Ѻ�����ѧ�դ���觴ѧ���仹�� <-- ������� bgcolor="�����" ��ͨҡ ����Դ�� ���ͺ�բͧ�����ѧ ���Ѿ������ �͡�˹�ͨҡ��á�˹��괢ͧ�վ����ѧ����� ��Ẻ "#FFCCFF" ���ʤ�������� �ѧ����ö���С�˹��������Ẻ����ѡ��᷹���������µç�� ���ͺ���������������µç ���Ѿ������ ��ʹբͧ��á�˹������Ẻ��������µç��� �ӧ��� ����� �ҡ�����ҵ�ͧ��á�˹����������դ��������ᵡ��ҧ�ѹ��� ���Ҩ�з�����������ùѡ �͡�ҡ�����ʤ����Ẻ������ҧ�á᷹ มาทำความเข้าใจการใช้งานคำสั่ง background สำหรับ css กันนะครับ เพราะเชื่อว่านี่เป็น 1 ในคำสั่งที่ใช้บ่อยเป็นอันดับต้น ๆ และคนหัดทำ css น่าจะรู้จักมันไว้ CSS : backgroundมาดูกันก่อนนะครับ ว่า background นั้น มันมีแบ่งย่อยอะไรบ้าง เพื่อเราจะได้รู้ว่า เราสามารถกำหนดอะไรให้คำสั่ง background ได้
คราวนี้ เรามาดูวิธีการใช้ในแต่ละคำสั่งกันนะครับ background-colorbackground-color นั้นใช้งานไม่ยากเลย มีวิธีการกำหนดสีหลัก ๆ อยู่ 3 แบบ ได้แก่
มาดูตัวอย่างกันนะครับ อย่างเช่นแบบนี้
พื้นหลังสีแดง พื้นหลังสีน้ำเงิน พื้นหลังสีเหลือง ทีนี้เวลาเราอยากให้ div หรือ element ไหนเรามีสีพื้นหลัง ก็ใช้ background-color ได้เลยครับ background-imageสำหรับคำนี้เป็นเหมือนคำสั่งที่เชื่อมไปยังคำสั่งอื่น ๆ ที่เหลือ ถ้าไม่ได้สั่ง background-image คำสั่งที่เหลือยกเว้น background-color ก็ไม่มีความจำเป็น แล้ว background-image มันใช้งานยังไงละ
ทีนี้ปัญหาของบางคนคือ แล้วเราจะใส่ในส่วน “รูปภาพที่จะใช้งาน” ยังไงเหรอ ลองดูตัวอย่างนี้นะครับ โดยเรามีรูป facebook อยู่สองรูป รูปที่อยู่ด้านนอกชื่อ out-facebook.png และรูปที่อยู่ใน folder images ชื่อ in-facebook.png ถ้าเราต้องการใช้งานรูป facebook ที่อยู่ด้านนอกให้สั่งใน css ว่า
แต่ถ้าจะใช้รูปใน folder images ละ ซึ่งใน folder images นั้นก็มีรูป facebook ซึ่งมีชื่อรูปว่า in-facebook.png ดังนั้นเราก็ต้องสั่งว่า
คราวนี้ผมย้ายตัว style.css เข้าไปไว้ใน folder css ละ ถ้าเราต้องการใช้งาน out-facebook.png ละต้องสั่งยังไง
การใส่ ../ คือ เหมือนออกมาจาก folder css ซึ่งเราก็จะมาเจอ out-facebook.png ดังนั้นถ้าต้องการใช้งาน in-facebook.png เราก็ต้องทำคล้าย ๆ คือ ออกจาก folder css ก่อน แล้วจึงเข้าไปยัง folder images ก็ต้องสั่งแบบนี้
แต่ถ้าเป็นในกรณีที่เราต้องการรูปจากเว็บอื่น หรือรูปที่เราทราบ url ก็ให้ใส่ส่งไปได้เลย อย่างเช่น ผมจะใช้รูปยูริด้านบนมาเป็นพื้นหลัง โดย url ของรูปคือ https://rabbitinblack.com/wp-content/uploads/2011/12/yuri.jpg ดังนั้นผมก็ต้องสั่งว่า
เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ
จะเห็นว่ากล่องขนาดกว้าง 600px สูง 500px ถูกปูพื้นหลังด้วยรูปของยูริ แต่ถ้าเราต้องการแค่รูปเดียวละ ไม่ได้ต้องการให้ปูเต็มแบบนี้ ไปดูหัวข้อต่อไปเลยครับ background-repeatการที่ตัวอย่างหัวข้อที่แล้ว มีรูปของยูริปูเต็ม div นั้นเพราะว่าค่าพื้นฐานของ background-repeat ก็คือ repeat แล้ว background-repeat มีค่าอะไรให้เราใช้งานบ้างละ bankjittapolPHP Super MemberPosts: 344Joined: 21/10/2019 10:19 am CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
Post by bankjittapol » 28/11/2019 6:03 pm CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง Code: Select all
การนำไปใช้งาน background-color Code: Select all ซึ่ง 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 สามารถใส่รูปได้มากกว่า 1 รูปได้ และยังสามารถ ใส่คำสั่ง linear-gradient ใล่ สีได้ezgif.com-video-to-gif (1).gif (43.31 KiB) Viewed 2237 times background-positionCode: Select all ซึ่ง 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 เพื่อให้แสดงขนาดจริงของพื้นหลัง หรือกำหนดเป็นพิกเซล หรือ เป็นเปอร์เซ็น หรือกำหนดให้ ขนาดเท่ากับเนื้อหาที่อยุ่ข้างในพื้นหลังทั้งหมด โดยใช้ cover หรือกำหนด หรือใช้ containezgif.com-video-to-gif (1).gif (140.41 KiB) Viewed 2237 times background-repeatCode: Select all ซึ่ง background-repeat สามารถกำหนดให้แสดงพื้นหลังซ้ำกันโดยใช้ repeat หรือกำหนดให้ทำซ้ำเฉพาะแกน x หรือ y หรือกำหนดไม่ให้มีการแสดงซ้ำezgif.com-video-to-gif.gif (182.79 KiB) Viewed 2237 times background-originCode: Select all
ezgif.com-video-to-gif (1).gif (21.1 KiB) Viewed 2237 times background-clipCode: Select all ซึ่ง background-clip จะมีการกำหนดเหมือนกับ background-origin แต่การแสดงผลนั้นแตกต่างกันbackground-attachment Code: Select all ซึ่ง background-attachment สามารถกำหนดให้พื้นหลังนั้นแสดงไปตาม scoll หรือ fixed ไว้ หรือ เคลื่อนที่ตามเนื้อหาbackground-blend-mode Code: Select all ซึ่ง 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 Top |