ความโปร่งใสของพื้นหลัง CSS พื้นหลังโปร่งใสหรือข้อความที่ใช้ CSS

กับการถือกำเนิดของ CSS3 การทำงานของนักออกแบบรูปแบบได้กลายเป็นเรื่องง่ายและมีเหตุผลมากขึ้นในหลาย ๆ ด้าน: อย่างไรก็ตามคุณสามารถกำหนดค่าวัตถุได้อย่างยืดหยุ่นทุกครั้งที่ใช้ JavaScript น้อยกว่า สมมติว่าคุณต้องการปรับความโปร่งใสพื้นหลัง - CSS มีตัวเลือกหลายตัว

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

แอตทริบิวต์ background-color

ใน CSS คุณสามารถระบุ สีพื้นหลังได้ หลายวิธีโดยใช้รหัสฐานสิบหกชื่อสีหรือเรกคอร์ด RGB ใน CSS3 คุณสามารถใช้ตัวเลือก RGBA แทนการบันทึก RGB ได้

รหัสสีฐานสิบหกถูกเขียนขึ้นในพร็อพเพอร์ตี้หลังจากตาราง: background-color: # 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 ตัวเลือกจะเหมือนกันกับ RGB หรือ RGBA เฉพาะในรูปแบบอื่น: Hue (ค่าสีคือค่าของวงล้อสีที่ตั้งไว้เป็นองศา), Saturate (ความเข้มเป็นเปอร์เซ็นต์ของสีในเปอร์เซ็นต์จาก 0 ถึง 100), Lightness (ความสว่างคือความสว่างที่วัดได้เช่นเดียวกับพารามิเตอร์ Saturate )

แอตทริบิวต์ภาพพื้นหลัง

พื้นหลังโปร่งใสที่ข้ามเบราว์เซอร์ส่วนใหญ่คือการใช้ภาพ ใน CSS3 คุณสามารถระบุภาพได้ไม่กี่ภาพโดยทำเครื่องหมายจุลภาค ตัวอย่างเช่น:

Body {background-image: url (bg1.png), url (bg2.png)}

วิธีนี้สนับสนุนแม้แต่ IE8 ใช้ภาพหลายภาพเป็นพื้นหลังสำหรับจัดเก็บยาง สิ่งสำคัญอย่าลืมเมื่อใช้ภาพใด ๆ ก็เพื่อตั้งสีพื้นหลังใน CSS เนื่องจากผู้ใช้ไม่สามารถบูตภาพได้

แอตทริบิวต์ background-position

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

Body {background-position: right center;} - ในตัวอย่างนี้พื้นหลังจะอยู่ทางด้านขวาของหน้าด้วยด้านล่างและด้านบนของระยะทางไปยังภาพเดียวกัน

แอตทริบิวต์ background-size

บางครั้งคุณต้องการใช้ CSS เพื่อยืดพื้นหลังหรือลดขนาด ในการทำเช่นนี้ให้ใช้แอตทริบิวต์ background-size และขนาดพื้นหลังสามารถระบุเป็นพิกเซลหรือเปอร์เซ็นต์และในหน่วยวัดอื่น ๆ

ด้วยแอ็ตทริบิวต์นี้มีปัญหาบางอย่าง: สำหรับการแสดงผลพื้นหลังในเบราว์เซอร์เวอร์ชันเริ่มต้นจำเป็นต้องใช้คำนำหน้า แน่นอนว่าเวอร์ชันปัจจุบันรองรับคุณลักษณะนี้อย่างสมบูรณ์และจำเป็นต้องใช้คุณสมบัติเฉพาะได้หายไป

แอตทริบิวต์ background-attachment

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

• แก้ไข - ทำให้ภาพบนพื้นหลังของภาพนิ่ง;
• เลื่อน - ฉากหลังเลื่อนไปพร้อมกับส่วนที่เหลือขององค์ประกอบ
• ท้องถิ่น - ภาพบนพื้นหลังจะเลื่อนไปมาหากสกรอลล์มีเนื้อหา พื้นหลังที่เกินกว่าเนื้อหาได้รับการแก้ไขแล้ว

ตัวอย่างการใช้งาน:

เนื้อหา {background-attachment fixed}

ขณะนี้ Firefox ไม่สนับสนุนคุณสมบัติล่าสุด (ท้องถิ่น)

แอตทริบิวต์ background-origin

แอ็ตทริบิวต์นี้รับผิดชอบการวางตำแหน่งองค์ประกอบ เบราว์เซอร์เวอร์ชันต้นต้องใช้คำนำหน้า สถานที่ให้บริการตัวเองมีสามพารามิเตอร์:

• กล่องแพดดิ้ง วางตำแหน่งพื้นหลังโดยคำนึงถึงขอบโดยคำนึงถึงความหนาของเฟรม
• Border-box แตกต่างจากคุณสมบัติก่อนหน้าที่เส้นขอบสามารถครอบคลุมพื้นหลังได้ทั้งหมดหรือบางส่วน
• กล่องเนื้อหาจะ วางตำแหน่งภาพหมุนไปที่เนื้อหา

หากมีการระบุค่าหลายค่าเบราว์เซอร์สามารถตอบสนองได้ด้วยตนเอง: Firefox และ Opera รับรู้เฉพาะตัวเลือกแรกเท่านั้น

แอตทริบิวต์ background-repeat

โดยปกติถ้าพื้นหลังถูกระบุโดยภาพจะต้องทำซ้ำในแนวนอนหรือแนวตั้ง สำหรับคุณลักษณะนี้จะใช้แอตทริบิวต์ background-repeat ดังนั้นพื้นหลังของบล็อกที่ CSS มีคุณสมบัติดังกล่าวสามารถมีหนึ่งในหลายพารามิเตอร์:

• ไม่ซ้ำ - ภาพปรากฏบนหน้าในรูปแบบเดียว
• ทำซ้ำ - พื้นหลังจะทำซ้ำตามแกน x และ y;
• Repeat-x - เฉพาะในแนวนอนเท่านั้น
• ทำซ้ำ - y - เฉพาะในแนวตั้งเท่านั้น
• Space - พื้นหลังจะถูกทำซ้ำ แต่หากไม่เต็มช่องว่างภาพจะปรากฏขึ้นระหว่างภาพ
• รอบ - ภาพถูกปรับขนาดถ้าคุณไม่สามารถรับพื้นที่ทั้งหมดที่เต็มไปด้วยภาพทั้งหมด

ตัวอย่างของการใช้แอตทริบิวต์:

Body {background-repeat: ไม่ซ้ำซ้ำ} - คล้ายกับ background-repeat: repeat-y

ใน CSS3 คุณสามารถระบุค่าสำหรับรูปภาพหลายภาพได้ถ้าคุณใช้พารามิเตอร์จุลภาคในรายการ

แอตทริบิวต์ background-clip

แอตทริบิวต์นี้กำหนดลักษณะพื้นหลังภายใต้ขอบเขต (ตัวอย่างเช่นในกรณีของเฟรมจุด):

• Padding-box - พื้นหลังจะแสดงอย่างเคร่งครัดภายในบล็อก
• Border-box - ภาพมาภายใต้กรอบ;
• กล่องเนื้อหา - ภาพพื้นหลังปรากฏเฉพาะภายในเนื้อหาเท่านั้น

ตัวอย่างการใช้งาน:

Body {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 หรือไม่ หากคุณไม่สามารถติดตั้งเบราว์เซอร์เวอร์ชันเก่าให้หาบริการที่จะทดสอบการทำงานของไซต์ในเบราว์เซอร์ต่างๆในแบบออนไลน์