ไม่มีหมวดหมู่

download font

ดาวน์โหลดฟอนต์ download font

download icon

ดาวน์โหลด ไอค่อน จากสะดุ้ง

download template

ดาวน์โหลด เทมเพลตเว็บต่างๆ

Download Vector

ดาวน์โหลดภาพเว็กเตอร์ จากสะดุ้ง

ของเสริม photoshop

brush style patterns

Home » สะดุ้ง css

css กับการกำหนด background

Submitted by on วันศุกร์, 17 ตุลาคม 2008No Comment


คำค้นหา: , , ,

css css กับการกำหนด background

1. กำหนดสี Background ด้วย CSS
มาดูตัวอย่าง  code css กันดีกว่า
background-color: yellow           /* กำหนดสีแบบใส่ชื่อไปเลย */
background-color: #00ff00       /* กำหนดแบบ ใส่รหัสี*/
background-color: transparent  /*  กำหนดแบบ พื้นใสๆ*/
background-color: rgb(250,0,255) /* กำหนดแบบ */

2. กำหนด Background โดยใส่รูปภาพเข้าไป
background-image:url(‘ใส่ที่อยู่รูปภาพตรงนี้’)

background-image: url(‘bgdesert.jpg’);
background-repeat: repeat;    เป็นการกำหนด Background แบบว่าถ้ารูปที่เป็นพื้นหลังมีขนาดเล็กกว่า
พื้นที่ ที่ต้องการใส่ background รูปจะมีการแสดงแบบ วนจนเต็ม

background-image: url(‘bgdesert.jpg’); background-repeat: repeat-y มีการ repat รูป Background แค่แนวตั้ง

background-image: url(‘bgdesert.jpg’);background-repeat: repeat-x มีการ repat รูป Background แค่แนวนอน

background-image: url(‘bgdesert.jpg’);background-repeat: no-repeat  ไม่ให้มีการ repeat
 

background-image:url(‘smiley.gif’);
background-repeat:no-repeat; 
background-attachment:fixed; กำหนด แบบคงที่
background-position:center;  กำหนด ให้แสดงรูปตรงกลาง

background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment:fixed; กำหนด แบบคงที่
background-position: 30% 20%;  กำหนด ให้แสดงรูปแบบกำหนดค่าเป็น %  โดยค่าแรกเป็น แกน Y (นอน)และตัวหลังเป็นแกน X(ตั้ง)

background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;  กำหนด ให้แสดงรูปแบบกำหนดค่าเป็น ค่า px  โดยค่าแรกเป็น แกน Y (นอน)และตัวหลังเป็นแกน X(ตั้ง)
background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment: fixed  เป็นการกำหนดให้พื้นหลังหรือ background อยู่กับที่ไม่มีการเลื่อนไป-มาตามการกด สโครลบาร์
background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;  สุดท้ายเป็นการ รวมทุกค่าที่เอยมาข้างต้น คือมีการ กำหนดสี รูป การ repeat กำหนด fixed และตำแหน่ง

 

ท้ายสุดและสุดท้ายถ้าอยากห็นภาพต้องลองไปทำดูครับ ด้วยความปรารถนาดีจาก สะดุ้ง.คอม

<<< google Plus (กูเกิ้ล พลัส)ซัดที่นี่


Related Posts

คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)

  สามารถนำบทความไปเผยแพร่ต่อได้ แต่ต้องทำ ลิงค์กับมาที่บทความนั้นๆด้วยนะครับ หากไม่ทำตามจะมีความผิดทางกฏหมายตาม พรบ. เกี่ยวกับลิขสิทธิ์ นะครับ