Hình ảnh tạo kiểu CSS
Tìm hiểu cách tạo kiểu cho hình ảnh bằng CSS.
Hình ảnh tròn
Sử dụng thuộc tính border-radius để tạo hình ảnh tròn:
Hình ảnh thu nhỏ
Sử dụng thuộc tính border để tạo hình ảnh thu nhỏ.
Hình ảnh thu nhỏ:
Ví dụ
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg"
alt="Paris">
Hãy tự mình thử »Hình ảnh thu nhỏ dưới dạng liên kết:
Ví dụ
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0
2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
Hãy tự mình thử » Hình ảnh đáp ứng
Hình ảnh đáp ứng sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình.
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng:
Nếu bạn muốn một 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 thêm thông tin sau:
Mẹo: Đọc thêm về Thiết kế web đáp ứng trong Hướng dẫn CSS RWD của chúng tôi.
Căn giữa một hình ảnh
Để căn giữa hình ảnh, đặt lề trái và phải thành auto và biến nó thành thành phần block :
Hình ảnh / Thẻ Polaroid
Cinque Terre
Đèn phía Bắc
Ví dụ
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} Hãy tự mình thử »Hình ảnh trong suốt
Thuộc tính opacity có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp thì càng minh bạch:
độ mờ 0,2
độ mờ 0,5
độ mờ 1
(mặc định)
văn bản hình ảnh
Cách định vị văn bản trong hình ảnh:
Ví dụ
Hãy tự mình thử:
Trên cùng bên trái » Trên cùng bên phải » Dưới cùng bên trái » Dưới cùng bên phải » Căn giữa »Bộ lọc hình ảnh
Thuộc tính filter CSS thêm các hiệu ứng hình ảnh (như độ mờ và độ bão hòa) vào một phần tử.
Lưu ý: Thuộc tính bộ lọc không được hỗ trợ trong Internet Explorer hoặc Edge 12.
Ví dụ
Thay đổi màu của tất cả hình ảnh thành đen trắng (xám 100%):
img {
filter: grayscale(100%);
}Mẹo: Hãy truy cập phần Tham khảo bộ lọc CSS của chúng tôi để tìm hiểu thêm về bộ lọc CSS.
Lớp phủ hình ảnh di chuột
Tạo hiệu ứng lớp phủ khi di chuột:
Lật một hình ảnh
Di chuyển chuột lên hình ảnh:
Thư viện hình ảnh đáp ứng
CSS có thể được sử dụng để tạo thư viện hình ảnh. Ví dụ này sử dụng truy vấn phương tiện để sắp xếp lại hình ảnh trên các kích thước màn hình khác nhau. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng:
Ví dụ
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} Hãy tự mình thử »Mẹo: Đọc thêm về Thiết kế web đáp ứng trong Hướng dẫn CSS RWD của chúng tôi.
Phương thức hình ảnh (Nâng cao)
Đây là một ví dụ để chứng minh CSS và JavaScript có thể hoạt động cùng nhau như thế nào.
Đầu tiên, sử dụng CSS để tạo một cửa sổ phương thức (hộp thoại) và ẩn nó theo mặc định.
Sau đó, sử dụng JavaScript để hiển thị cửa sổ phương thức và hiển thị hình ảnh bên trong phương thức khi người dùng nhấp vào hình ảnh:
Ví dụ
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Hãy tự mình thử »