Hình ảnh W3.CSS
Làm tròn:
Vòng tròn:
Có viền:
Chữ:
Hình ảnh tròn
Lớp w3-round thêm các góc tròn vào hình ảnh:
Hình ảnh được khoanh tròn
Lớp w3-circle định hình một hình ảnh thành một hình tròn:
Hình ảnh có viền
Lớp w3-border thêm đường viền xung quanh hình ảnh:
Hình ảnh dưới dạng thẻ
Bao bọc bất kỳ lớp w3-card-* nào xung quanh phần tử <img> để hiển thị nó dưới dạng thẻ (thêm bóng):
Simon
Ông chủ của mọi ông chủ
văn bản hình ảnh
Định vị văn bản trong hình ảnh với các lớp w3-display- :
Trên cùng bên trái
Trên cùng bên phải
Dưới cùng bên trái
Góc phải ở phía dưới
Bên trái
Phải
Trên cùng ở giữa
Đáy giữa
Ví dụ
<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-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div> Hãy tự mình thử »Hình ảnh đáp ứng
Một hình ảnh có thể được đặt để tự động thay đổi kích thước cho phù hợp với kích thước vùng chứa của nó.
Nếu bạn muốn hình ảnh thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ lên lớn hơn kích thước ban đầu của nó, hãy sử dụng lớp hình ảnh w3.
Nếu bạn muốn hình ảnh tăng hoặc giảm tỷ lệ phản hồi, hãy đặt thuộc tính CSS width thành 100%:
Nếu bạn muốn giới hạn hình ảnh phản hồi ở kích thước tối đa, hãy sử dụng thuộc tính chiều rộng tối đa:
Độ mờ
Các lớp w3-opacity làm cho hình ảnh trở nên trong suốt:
Bình thường
w3-độ mờ-phút
độ mờ w3
w3-độ mờ-max
Ví dụ
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max"> Hãy tự mình thử »Thang độ xám
Các lớp w3-grayscale thêm hiệu ứng thang độ xám vào hình ảnh:
Bình thường
w3-thang độ xám-min
w3-thang độ xám
w3-thang độ xám-max
Ví dụ
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max"> Hãy tự mình thử »Lưu ý: Các lớp w3-grayscale không được hỗ trợ trong IE 11 và các phiên bản cũ hơn.
màu nâu đỏ
Các lớp w3-sepia thêm hiệu ứng nâu đỏ vào hình ảnh:
Bình thường
w3-sepia-min
w3-nâu đỏ
w3-sepia-max
Ví dụ
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max"> Hãy tự mình thử »Lưu ý: Các lớp w3-sepia không được hỗ trợ trong IE 11 và các phiên bản cũ hơn.
Hiệu ứng di chuột
Bạn cũng có thể thêm các hiệu ứng đặc biệt khi di chuột/di chuột qua.
w3-hover-độ mờ
w3-hover-thang độ xám
w3-hover-sepia
Ví dụ
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia"> Hãy tự mình thử »Tắt độ mờ
Thêm độ trong suốt khi di chuột:
Xóa độ trong suốt khi di chuột:
Lớp w3-hover-opacity thêm độ trong suốt cho hình ảnh khi di chuột qua và lớp w3-hover-opacity-off loại bỏ độ trong suốt khi di chuột qua.
Ví dụ
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps"> Hãy tự mình thử »Xây dựng một album ảnh
Trong ví dụ này, chúng tôi sử dụng hệ thống W3.CSS Responsive Grid để tạo album ảnh trông đẹp mắt trên tất cả các thiết bị. Bạn sẽ tìm hiểu thêm về điều này sau.
Mùa hè 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Ví dụ
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div> Hãy tự mình thử »
