5 คุณสมบัติ CSS ที่คุณควรรู้

มีคุณสมบัติ CSS เช่นภาพพื้นหลัง, ภาพชายแดน, การปิดบังและคุณสมบัติการตัดทอนซึ่งคุณสามารถทำได้ เพิ่มรูปภาพโดยตรง ไปยังหน้าเว็บและควบคุมพฤติกรรมของพวกเขา อย่างไรก็ตามยังมีคุณสมบัติ CSS ที่เกี่ยวข้องกับรูปภาพที่กล่าวถึงบ่อยๆ ทำงานกับภาพที่เพิ่มด้วย แท็ก HTML, ซึ่งวิธีที่ต้องการในการเพิ่มภาพไปยังหน้าเว็บ.

รายละเอียดงานของคุณสมบัติหลังเหล่านี้แตกต่างกันไป ควบคุมเงาของภาพ ไปยัง การตั้งค่าความคมชัด, ช่วยให้เราควบคุมลักษณะที่ปรากฏและตำแหน่งของรูปภาพที่เพิ่มด้วย แท็ก ลองดูพวกเขาทีละคน.

1. ปรับภาพให้คมชัดด้วย ภาพการแสดงผล

เมื่อภาพถูกลดขนาดเบราว์เซอร์ ทำให้ภาพเรียบขึ้น, ดังนั้นมันจึงดูไม่เป็นพิกเซล แต่ขึ้นอยู่กับความละเอียดของภาพและหน้าจอสิ่งนี้อาจไม่ดีที่สุดตลอดเวลา คุณสามารถควบคุมพฤติกรรมของเบราว์เซอร์นี้ได้ด้วย ภาพการแสดงผล คุณสมบัติ.

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

คมชัดขอบ ราคา รักษาความคมชัดของสีระหว่างพิกเซล. กล่าวอีกนัยหนึ่งไม่มีการทำให้ภาพราบเรียบ เหมาะสำหรับงานศิลปะพิกเซล.

เมื่อ ตัวหนังสือ มีการใช้พิกเซลใกล้เคียงของพิกเซลอาจ ใช้รูปลักษณ์ของมัน, ทำให้ดูเหมือนพวกเขาอยู่ด้วยกัน รูปแบบหนึ่งพิกเซลขนาดใหญ่, เหมาะสำหรับหน้าจอความละเอียดสูง.

หากคุณมองอย่างใกล้ชิดที่ขอบดอกไม้ใน GIF ด้านล่างคุณจะเห็นความแตกต่างระหว่างแบบปกติและแบบ ตัวหนังสือ ภาพ.

 img การแสดงภาพ: พิกเซล  

2. ยืดภาพด้วย วัตถุพอดี

บรรจุ, ปก, ใส่ ค่าทั้งหมดเป็นสิ่งที่คุ้นเคยเราใช้มันเพื่อ พื้นหลังขนาด คุณสมบัติที่ควบคุมวิธีการที่ภาพพื้นหลังเติมองค์ประกอบให้เป็นองค์ประกอบ วัตถุพอดี คุณสมบัติค่อนข้างคล้ายกับมันตามที่กำหนด ขนาดภาพที่อยู่ภายในคอนเทนเนอร์.

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

 
  #container width: 300px; ความสูง: 300px;  img width: 100%; ความสูง: 100%; วัตถุพอดี: บรรจุ;  

3. เลื่อนภาพด้วย วัตถุตำแหน่ง

ในทำนองเดียวกันกับการพึ่งพาอาศัยกัน พื้นหลังตำแหน่ง ทรัพย์สินของ พื้นหลังขนาด, มีของ วัตถุตำแหน่ง ทรัพย์สินสำหรับ วัตถุพอดี, เกินไป.

วัตถุพอดี คุณสมบัติ ย้ายภาพ ภายในคอนเทนเนอร์รูปภาพ เพื่อพิกัดที่กำหนด. พิกัดสามารถกำหนดเป็น หน่วยความยาวสัมบูรณ์, หน่วยความยาวสัมพัทธ์, คำหลัก (ด้านบน, ซ้าย, ศูนย์, ด้านล่าง, และ ขวา) หรือ การรวมกันที่ถูกต้องของพวกเขา (ด้านบน 20px ขวา 5px, กลางขวา 80px).

 
  #container width: 300px; ความสูง: 300px;  img width: 100%; ความสูง: 100%; ตำแหน่งของวัตถุ: 150px 0;  

4. ตั้งค่าภาพด้วย แนวตั้งชิด

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

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

 
 รูปแบบไฟล์ PDF  
 

5. ภาพเงาด้วย ตัวกรอง: เงา ()

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

ข้อโต้แย้งของมันคือ คล้ายกับค่าของคุณสมบัติ CSS ที่เกี่ยวข้องกับเงา (ข้อความเงา, กล่องเงา) สองคนแรกเป็นตัวแทนของ ระยะทางแนวตั้งและแนวนอน ระหว่างเงาและภาพที่สามและสี่คือ เบลอ และ รัศมีการแพร่กระจายของเงา, และอันสุดท้ายคือ สีเงา.

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

 img filter: drop-shadow (0 0 5px blue);  

อ่านเพิ่มเติม: ภาพสะท้อน CSS3 [เคล็ดลับ CSS3]