CSS: img

.instui-img — <img> ที่มีสไตล์ พร้อมตัวแก้ไข display, crop และ effect ที่เรียงซ้อนกัน

เอฟเฟกต์ประกอบกันผ่าน custom property ร่วม --pantoken-img-filter ดังนั้น -with-grayscale และ -with-blur สามารถนำมาใช้ร่วมกันได้; ตัวแก้ไข crop ของ -constrain-* ต้องให้ผู้ใช้กำหนดขนาดกล่องอย่างชัดเจน

Source: img.css

การเข้าถึง

ให้ข้อความ alt ที่มีความหมายเพื่ออธิบายภาพ และใช้ alt="" ว่างสำหรับภาพที่เป็นเพียงการประดับเท่านั้นเพื่อให้เทคโนโลยีช่วยเหลือข้ามไป

การใช้งาน

@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";

ตัวอย่าง

<img class="instui-img" alt="Gradient">

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
.-constrain-contain	ปรับขนาดให้พอดีกับภายในกล่อง (contain)
.-constrain-cover	ปรับขนาดให้เติมเต็มกล่อง (cover)
.-display-block	แสดงเป็นองค์ประกอบแบบบล็อก
.-with-blur	ใช้เอฟเฟกต์เบลอ
.-with-grayscale	ใช้เอฟเฟกต์เกรย์สเกล

พร็อพเพอร์ตีที่กำหนดเอง

คุณสมบัติ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
--pantoken-img	—	—	filter <filter-value-list> | none — ฟิลเตอร์ CSS ที่ประกอบกันบนภาพ; ตัวแก้ไขเอฟเฟกต์เป็นผู้ตั้งค่า และคุณสามารถเขียนทับเพื่อกำหนดฟิลเตอร์แบบกำหนดเอง

โทเค็นที่ใช้

Token	ชนิด	ค่า
--instui-component-img-effect-transition-duration	<time>	1s
--instui-component-img-image-blur-amount	<length>	0.25em
--pantoken-img-filter	none | <filter-value-list> | <-ms-filter-function-list>	none