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]
">