การแสดงภาพ
โค้งมน:
วงกลม:
เป้:
ข้อความ:
ธรรมชาติ
ภาพที่โค้งมน
ชั้น W3 รอบเพิ่มมุมโค้งมนในภาพ:
ภาพวงกลม
ชั้น W3 วงกลมรูปทรงภาพในแวดวงนี้:
ล้อมรอบภาพ
ชั้น W3 พรมแดนเพิ่มเส้นขอบรอบ ๆ ภาพ:
ภาพ Hoverable
ชั้น W3-hover-ทึบเพิ่มความโปร่งใสเพื่อภาพบนเมาส์มากกว่า:
รูปที่บัตร
ห่อใด ๆ ของ W3-card- เรียน * รอบ <img> องค์ประกอบที่จะแสดงมันเป็นการ์ด (เพิ่มเงา):
ไซมอน
เจ้านายของผู้บังคับบัญชาทั้งหมด
ข้อความรูปภาพ
ตำแหน่งข้อความในภาพที่มีการเรียน W3-Display- นั้น:
บนซ้าย
ด้านบนขวา
ด้านล่างซ้าย
ด้านล่างขวา
กลาง
ตัวอย่าง
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> ลองตัวเอง» สร้างอัลบั้มรูป
ในตัวอย่างนี้เราใช้ระบบ W3.CSS ที่ตอบสนองต่อตารางเพื่อสร้างอัลบั้มภาพที่ดูดีในทุกอุปกรณ์ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง
ฤดูร้อน 2015
5 Terre
มอนเต
Vernazza
มานาโรลา
Corniglia
Riomaggiore
ตัวอย่าง
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
ลองตัวเอง»