ความโปร่งใสของพื้นหลัง CSS พื้นหลังโปร่งใสหรือข้อความที่ใช้ CSS
กับการถือกำเนิดของ CSS3 การทำงานของนักออกแบบเค้าโครงในหลายประการกลายเป็นเรื่องง่ายและตรรกะมากขึ้น: ในความเป็นจริงตอนนี้มันเป็นไปได้ที่จะตั้งค่าความยืดหยุ่นได้อย่างแท้จริงวัตถุทั้งหมดไม่ค่อยมักจะหันไปใช้ JavaScript สมมติว่าคุณต้องการปรับความโปร่งใสของพื้นหลัง - CSS มีตัวเลือกหลายตัว
พื้นหลังถูกตั้งโดยชุดของคุณลักษณะ (พื้นหลังภาพ,พื้นหลังพื้นหลัง, พื้นหลังที่มาพื้นหลังที่มาพื้นหลังที่มาพื้นหลังที่มาพื้นหลัง, พื้นหลังสีพื้นหลัง) ซึ่งแต่ละที่สามารถลงทะเบียนแยกกันหรือรวมกันภายใต้คุณลักษณะพื้นหลัง ลองวิเคราะห์แต่ละอย่างละเอียดมากขึ้น
แอตทริบิวต์ background-color
ใน CSS คุณสามารถระบุสีพื้นหลังได้หลายวิธีโดยใช้รหัสฐานสิบหกชื่อสีหรือเรกคอร์ด RGB ใน CSS3 คุณสามารถใช้ตัวเลือก RGBA แทนการบันทึก RGB ได้
รหัสสีฐานสิบหกถูกเขียนขึ้นคุณสมบัติหลังเส้นตาราง: พื้นหลังสี: # FFDAB9 ถ้าอักขระในระเบียนดังกล่าวจับคู่เป็นคู่รหัสจะสั้นลงเล็กน้อย: # ccff00 สามารถเขียนเป็น # cf0:
body {background-color: # cf0;}
ชื่ออยู่ในดอกไม้ที่แปลกที่สุด ตัวอย่างเช่นนอกเหนือจากมาตรฐานสีแดงและสีขาวคุณสามารถใช้ NavajoWhite (#FFDEAD) หรือ Honeydew2 (# E0EEE0):
ร่างกาย {background-color: purple;}
บันทึกล่าสุดของ RGB หรือ RGBA ช่วยให้สามารถบันทึกได้กำหนดสีไม่เพียง แต่ยังความโปร่งใสของพื้นหลัง CSS แต่วิธีการทำงานใน IE เท่านั้นในรุ่น 9 เบราเซอร์อื่น ๆ มักจะรู้จักตัวเลือกนี้ด้วยความโปร่งใส มาตรฐาน W3C เป็นที่นิยมใช้ RGBA แทน RGB ปกติมากขึ้น
ค่าสุดท้ายสำหรับ RGBA และตั้งค่าความทึบของพื้นหลังจาก 0 (โปร่งใส) เป็น 1 (ทึบแสง)
มีความหมายที่ผิดปกติมากขึ้น สีพื้นหลังสามารถตั้งค่าการใช้ HSL และ HSLA ทั้งสองถูกเพิ่มเข้าไปใน CSS3 และดังนั้นจึงไม่ได้รับการสนับสนุนจาก IE รุ่นที่ 9 หรือสูงกว่า Embodiments RGB เหมือนกันหรือ RGBA เพียงในรูปแบบที่แตกต่างกัน: เว้ (ในร่ม - ค่าในวงล้อสีที่จะได้รับในองศา), ชุ่ม (อิ่มตัว - ความเข้มของสีเป็นเปอร์เซ็นต์จาก 0 ถึง 100) ความสว่าง (สว่าง - สว่างวัดในทำนองเดียวกันพารามิเตอร์ชุ่ม )
แอตทริบิวต์ภาพพื้นหลัง
เบราว์เซอร์พื้นหลังที่โปร่งใสที่สุดคือการใช้ภาพ ใน CSS3 คุณสามารถระบุภาพได้หลายรูปแบบโดยคั่นด้วยเครื่องหมายจุลภาค ตัวอย่างเช่น:
body {background-image: url (bg1.png), url (bg2.png)}
วิธีนี้สนับสนุน IE8 ใช้ภาพหลายภาพเป็นพื้นหลังเพื่อจัดวางยาง สิ่งสำคัญคืออย่าลืมเมื่อใช้ภาพใด ๆ ก็ตั้งสีพื้นหลังใน CSS เนื่องจากผู้ใช้อาจไม่โหลดภาพ
แอตทริบิวต์ตำแหน่งพื้นหลัง
หากคุณใช้ภาพเพื่อตั้งค่าพื้นหลังblock, CSS จะช่วยให้คุณสามารถวางตำแหน่งภาพได้ทุกที่บนหน้าจอ ภาพจะอยู่ที่มุมซ้ายบน แอตทริบิวต์ยอมรับคำแนะนำด้วยวาจา (ด้านบนล่างซ้ายหรือขวา) หรือตัวเลข (เปอร์เซ็นต์พิกเซลและหน่วยวัดอื่น ๆ ) จำเป็นต้องระบุค่าสองค่า ได้แก่ แนวนอนและแนวตั้ง:
แอตทริบิวต์ขนาดพื้นหลัง
บางครั้งคุณต้องการยืดพื้นหลังโดยใช้ CSS หรือลดขนาด เมื่อต้องการทำเช่นนี้ให้ใช้แอตทริบิวต์ background-size และกำหนดขนาดของพื้นหลังเป็นพิกเซลหรือเปอร์เซ็นต์และในหน่วยอื่น ๆ
มีปัญหากับแอตทริบิวต์นี้: หากต้องการแสดงพื้นหลังในเบราว์เซอร์เวอร์ชันก่อนหน้านี้อย่างถูกต้องคุณต้องใช้คำนำหน้า แน่นอนว่าเวอร์ชันปัจจุบันรองรับคุณลักษณะนี้อย่างสมบูรณ์และจำเป็นต้องใช้คุณสมบัติเฉพาะได้หายไป
แอตทริบิวต์ background-attachment
แอตทริบิวต์นี้กำหนดลักษณะภาพพื้นหลังเมื่อเลื่อนลง ดังนั้นจึงอาจใช้เวลา 3 ค่า (โดยไม่คำนึงถึงสิ่งที่สืบทอดซึ่งเป็นเรื่องธรรมดาสำหรับคุณลักษณะทั้งหมดที่นำเสนอในบทความนี้):
- คงที่ - ทำให้ภาพบนพื้นหลังยังคง;
- เลื่อน - พื้นหลังเลื่อนพร้อมกับองค์ประกอบอื่น ๆ ;
- ในประเทศ - ภาพบนพื้นหลังเลื่อนหากการเลื่อนมีเนื้อหา มีการจับภาพพื้นหลังที่เกินกว่าเนื้อหา
ตัวอย่างการใช้งาน:
เนื้อหา {background-attachment fixed}
ปัจจุบัน Firefox ไม่สนับสนุนคุณสมบัติล่าสุด (ท้องถิ่น)
แอตทริบิวต์พื้นหลังต้นทาง
แอ็ตทริบิวต์นี้รับผิดชอบการวางตำแหน่งขององค์ประกอบ เบราว์เซอร์ก่อนหน้านี้จำเป็นต้องใช้คำนำหน้า สถานที่ให้บริการตัวเองมีสามพารามิเตอร์:
- ช่องว่างภายในกล่อง ตำแหน่งพื้นหลังเทียบกับขอบในขณะที่คำนึงถึงความหนาของกรอบ;
- ชายแดนกล่อง แตกต่างจากคุณสมบัติก่อนหน้าในเส้นขอบที่สมบูรณ์หรือบางส่วนทับซ้อนกันในพื้นหลัง
- กล่องเนื้อหา การวางตำแหน่งภาพ, การยึดติดกับเนื้อหา
หากมีการตั้งค่าหลายค่าเบราว์เซอร์สามารถตอบสนองได้ด้วยตนเอง: Firefox และ Opera ยอมรับตัวเลือกแรกเท่านั้น
แอตทริบิวต์ background-repeat
ตามกฎแล้วถ้าพื้นหลังถูกกำหนดโดยรูปภาพควรทำซ้ำในแนวนอนหรือแนวตั้ง นี่คือสิ่งที่ใช้สำหรับแอตทริบิวต์ background-repeat ดังนั้นพื้นหลังของบล็อก CSS ซึ่งมีคุณสมบัติดังกล่าวอาจมีหนึ่งในหลายพารามิเตอร์:
- ไม่มีซ้ำ - ภาพปรากฏบนหน้าในเวอร์ชันเดียว
- ทำซ้ำ - พื้นหลังจะถูกทำซ้ำตามแกน x และ y;
- ซ้ำ-X - เฉพาะแนวนอนเท่านั้น
- ซ้ำ-Y - เฉพาะในแนวตั้งเท่านั้น
- ช่องว่าง - พื้นหลังจะทำซ้ำ แต่หากพื้นที่ว่างไม่เต็มช่องว่างจะปรากฏขึ้นระหว่างภาพ
- รอบ - ภาพจะถูกปรับขนาดหากไม่สามารถเติมเต็มพื้นที่ทั้งหมดด้วยภาพทั้งหมด
ตัวอย่างการใช้งานแอตทริบิวต์:
body {background-repeat: ไม่ซ้ำซ้ำ} - ในทำนองเดียวกัน background-repeat: repeat-y
แอตทริบิวต์ background-clip
แอตทริบิวต์นี้กำหนดลักษณะการทำงานของพื้นหลังใต้เส้นขอบ (ตัวอย่างเช่นในกรณีของกล่องกระดาษประ):
- ช่องว่างภายในกล่อง - พื้นหลังจะปรากฏอย่างชัดเจนภายในบล็อก;
- ชายแดนกล่อง - ภาพมาภายใต้กรอบ;
- กล่องเนื้อหา - ภาพในพื้นหลังจะปรากฏเฉพาะภายในเนื้อหาเท่านั้น
ตัวอย่างการใช้งาน:
เนื้อหา {background-clip: content-box;}
Chrom และ Safari จำเป็นต้องใช้คำนำหน้าเว็บไซด์
ความโปร่งแสงและตัวกรอง
แอตทริบิวต์ opacity ช่วยให้คุณสามารถตั้งค่าความโปร่งใสได้พื้นหลัง - คุณสมบัติ CSS จะทำงานได้ในทุกเบราว์เซอร์ ค่านี้ตั้งอยู่ระหว่าง 0.0 ถึง 1.0 ด้วยวิธีนี้คุณสามารถกำหนดความโปร่งใสของ CSS พื้นหลังได้ ไม่มีค่าจำนวนเต็ม: แทน 0.3 มันพอเพียงที่จะเขียน. 3:
.block {background-image: url (img.png); ความทึบ: .3;}
ในการกำหนดความโปร่งใสของพื้นหลัง CSS ซึ่งเหมาะสำหรับ IE ด้านล่างเวอร์ชันที่ 9 ให้ใช้แอตทริบิวต์ filter:
.block {background-image: url (img.png); ตัวกรอง: alpha (ความทึบ = 30);}
ในกรณีนี้ค่าความทึบถูกตั้งไว้ที่ขีด จำกัด 0 ถึง 100 โปรดทราบว่าแอตทริบิวต์ opacity ต่างจากการตั้งค่าความโปร่งใสโดยใช้ RGBA ในกรรมพันธุ์: เมื่อใช้ opacity พื้นหลังจะไม่โปร่งใส แต่องค์ประกอบทั้งหมดภายในบล็อกจะโปร่งใส
ติดตามสถิติการใช้งานเสมอเบราว์เซอร์ใน CIS และประเทศอื่น ๆ ปัญหาที่ใหญ่ที่สุดของนักออกแบบทั้งหมดคือ IE เวอร์ชันเก่าพวกเขาไม่อนุญาตให้ใช้ CSS3 อย่างเต็มรูปแบบ เมื่อออกแบบอย่าลืมใช้บริการพิเศษที่ตรวจสอบว่าเบราว์เซอร์ของคุณรองรับคุณสมบัติ CSS หรือไม่ หากคุณไม่สามารถติดตั้งเบราว์เซอร์เวอร์ชันเก่าให้ค้นหาบริการที่ตรวจสอบการทำงานของเว็บไซต์ในเบราว์เซอร์ที่แตกต่างกันทางออนไลน์
