ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSภูมิหลัง


พื้นหลัง CSS3

CSS3 มีไม่กี่คุณสมบัติพื้นหลังใหม่ซึ่งจะช่วยให้การควบคุมมากขึ้นขององค์ประกอบพื้นหลัง

ในบทนี้คุณจะได้เรียนรู้วิธีการเพิ่มภาพพื้นหลังหลายองค์ประกอบหนึ่ง

นอกจากนี้คุณยังจะได้เรียนรู้เกี่ยวกับคุณสมบัติของ CSS3 ใหม่ต่อไปนี้:

  • background-size
  • background-origin
  • background-clip

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน

ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า

คุณสมบัติ
background-image
(with multiple backgrounds)
4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-
9.0 4.0
3.6 -moz-
4.1
3.0 -webkit-
10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

ภูมิหลังหลาย CSS3

CSS3 ช่วยให้คุณเพิ่มภาพพื้นหลังหลายองค์ประกอบผ่าน background-image คุณสมบัติ

ภาพพื้นหลังที่แตกต่างกันจะถูกคั่นด้วยเครื่องหมายจุลภาคและภาพที่ซ้อนกันด้านบนของแต่ละอื่น ๆ ที่ภาพแรกจะใกล้เคียงกับผู้ชม

ตัวอย่างต่อไปนี้มีสองภาพพื้นหลังภาพแรกเป็นดอกไม้ (สอดคล้องกับด้านล่างและขวา) และภาพที่สองเป็นพื้นหลังกระดาษ (สอดคล้องกับมุมบนซ้าย):

ตัวอย่าง

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
ลองตัวเอง»

ภาพพื้นหลังหลายสามารถระบุได้โดยใช้คุณสมบัติที่พื้นหลังของแต่ละบุคคล (ข้างต้น) หรือ background คุณสมบัติจดชวเลข

ตัวอย่างต่อไปนี้ใช้ background คุณสมบัติจดชวเลข (ผลเช่นเดียวกับตัวอย่างข้างต้น):

ตัวอย่าง

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
ลองตัวเอง»

ขนาด CSS3 พื้นหลัง

CSS3 background-size คุณสมบัติช่วยให้คุณระบุขนาดของภาพพื้นหลัง

ก่อน CSS3 ขนาดของภาพพื้นหลังเป็นขนาดที่แท้จริงของภาพ CSS3 ช่วยให้เราสามารถกลับมาใช้ภาพพื้นหลังในบริบทที่แตกต่าง

ขนาดสามารถระบุได้ในความยาวร้อยละหรือโดยใช้หนึ่งในสองคำสำคัญ: มีหรือฝาครอบ

ตัวอย่างต่อไปนี้ปรับขนาดภาพพื้นหลังจะมีขนาดเล็กกว่าภาพต้นฉบับ (ใช้พิกเซล):

ภาพพื้นหลังเดิม:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ภาพพื้นหลังปรับขนาด:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

นี่คือรหัส:

ตัวอย่าง

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}
ลองตัวเอง»

สองค่าที่เป็นไปได้อื่น ๆ สำหรับ background-size มี contain และ cover

contain คำหลักตาชั่งภาพพื้นหลังจะมีขนาดใหญ่ที่สุดเท่าที่ทำได้ ( แต่ทั้งกว้างและความสูงของมันต้องพอดีภายในพื้นที่เนื้อหา) เป็นเช่นนี้ขึ้นอยู่กับสัดส่วนของภาพพื้นหลังและพื้นที่การวางตำแหน่งพื้นหลังอาจจะมีบางพื้นที่ของพื้นหลังที่ไม่ได้รับการคุ้มครองโดยภาพพื้นหลัง

cover คำหลักตาชั่งภาพพื้นหลังเพื่อให้พื้นที่เนื้อหาได้รับการคุ้มครองอย่างสมบูรณ์โดยภาพพื้นหลัง (ทั้งความกว้างและความสูงเท่ากับหรือเกินกว่าพื้นที่เนื้อหา) เช่นบางส่วนของภาพพื้นหลังอาจจะไม่สามารถมองเห็นได้ในพื้นที่การวางตำแหน่งพื้นหลัง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของ contain และ cover :

ตัวอย่าง

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
ลองตัวเอง»

กำหนดขนาดของหลายภาพพื้นหลัง

background-size คุณสมบัติยังยอมรับค่าหลายขนาดพื้นหลัง (ใช้รายการคั่นด้วยเครื่องหมายจุลภาค) เมื่อทำงานกับภูมิหลังหลาย

ตัวอย่างต่อไปนี้ได้สามภาพพื้นหลังที่ระบุมีที่แตกต่างกัน background-size ค่าสำหรับแต่ละภาพ:

ตัวอย่าง

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}
ลองตัวเอง»

เต็มขนาดภาพพื้นหลัง

ตอนนี้เราต้องการที่จะมีภาพพื้นหลังบนเว็บไซต์ที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมดตลอดเวลา

ข้อกำหนดดังต่อไปนี้:

  • เติมเต็มทั้งหน้ากับภาพ (ไม่มีช่องว่างสีขาว)
  • ภาพชั่งตามความจำเป็น
  • ภาพ Center ได้ที่หน้า
  • ไม่ก่อให้เกิดเลื่อน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะทำมัน ใช้องค์ประกอบของ html (องค์ประกอบ HTML อยู่เสมออย่างน้อยสูงของหน้าต่างเบราว์เซอร์) จากนั้นตั้งค่าพื้นหลังคงที่และมีศูนย์กลางอยู่ที่มัน จากนั้นปรับขนาดกับ background-size ทรัพย์สิน:

ตัวอย่าง

html {
    background: url(img_flower.jpg) no-repeat center fixed;
    background-size: cover;
}
ลองตัวเอง»

CSS3 background-origin ทรัพย์สิน

CSS3 background-origin อสังหาริมทรัพย์ระบุว่าภาพพื้นหลังอยู่ในตำแหน่ง

สถานที่ให้บริการจะใช้เวลาสามค่าที่แตกต่างกัน

  • border-box - ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของเส้นขอบ
  • padding-box - (เริ่มต้น) ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของขอบช่องว่างภายใน
  • content-box - ภาพพื้นหลังเริ่มจากมุมบนซ้ายของเนื้อหา

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง background-origin ทรัพย์สิน:

ตัวอย่าง

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}
ลองตัวเอง»

CSS3 background-clip ทรัพย์สิน

CSS3 background-clip คุณสมบัติระบุพื้นที่ของการวาดภาพพื้นหลัง

สถานที่ให้บริการจะใช้เวลาสามค่าที่แตกต่างกัน

  • border-box - (เริ่มต้น) พื้นหลังจะทาสีให้ขอบนอกของเส้นขอบ
  • padding-box - พื้นหลังเป็นภาพวาดที่ขอบด้านนอกของช่องว่างภายใน
  • content-box - พื้นหลังทาสีภายในกล่องเนื้อหา

ตัวอย่างต่อไปนี้แสดงให้เห็นถึง background-clip ทรัพย์สิน:

ตัวอย่าง

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »


CSS3 คุณสมบัติพื้นหลัง

คุณสมบัติ ลักษณะ
background สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดคุณสมบัติพื้นหลังในการประกาศ
background-clip ระบุพื้นที่ของการวาดภาพพื้นหลัง
background-image ระบุหนึ่งหรือมากกว่าภาพพื้นหลังสำหรับองค์ประกอบ
background-origin ระบุตำแหน่งที่ภาพพื้นหลัง (s) / อยู่ในตำแหน่ง
background-size ระบุขนาดของภาพพื้นหลัง (s)