Trang chủ
CSS
Hình ảnh kiểu CSS
Thử: Tạo một hình ảnh phương thức
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> #myImg { bán kính đường viền: 5px; con trỏ: con trỏ; chuyển tiếp: 0,3 giây; } #myImg:hover {opacity: 0.7;} /* Phương thức (nền) */ .modal { display: none; /* Bị ẩn theo mặc định */ vị trí: cố định; /* Giữ nguyên vị trí */ z-index: 1; /* Ngồi lên trên */ đệm-top: 100px; /* Vị trí của hộp */ left: 0; trên cùng: 0; chiều rộng: 100%; /* Toàn bộ chiều rộng */ chiều cao: 100%; /* Chiều cao tối đa */ tràn: tự động; /* Cho phép cuộn nếu cần */ màu nền: rgb(0,0,0); /* Màu dự phòng */ màu nền: rgba(0,0,0,0.9); /* Màu đen với độ mờ */ } /* Nội dung phương thức (hình ảnh) */ .modal-content { lề: auto; hiển thị: khối; chiều rộng: 80%; chiều rộng tối đa: 700px; } /* Chú thích của hình ảnh phương thức */ #caption { lề: auto; hiển thị: khối; chiều rộng: 80%; chiều rộng tối đa: 700px; căn chỉnh văn bản: giữa; màu sắc: #ccc; phần đệm: 10px 0; chiều cao: 150px; } /* Thêm hoạt ảnh */ .modal-content, #caption { animation-name: zoom; thời lượng hoạt ảnh: 0,6 giây; } @keyframes zoom { từ {transform:scale(0.1)} đến {transform:scale(1)} } /* Nút Đóng */ .close { vị trí: tuyệt đối; trên cùng: 15px; phải: 35px; màu: #f1f1f1; cỡ chữ: 40px; độ dày phông chữ: đậm; chuyển tiếp: 0,3 giây; } .close:hover, .close:focus { color: #bbb; trang trí văn bản: không có; con trỏ: con trỏ; } /* 100% chiều rộng hình ảnh trên màn hình nhỏ hơn */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> </head> <body> <h2>Chế độ hình ảnh</h2> <p>Ở đây, chúng tôi sử dụng CSS để tạo một chế độ (hộp thoại) được ẩn theo mặc định.</p> <p >Chúng tôi sử dụng JavaScript để kích hoạt phương thức và hiển thị hình ảnh hiện tại bên trong phương thức khi nó được nhấp vào. Cũng lưu ý rằng chúng tôi sử dụng giá trị từ thuộc tính "alt" của hình ảnh làm văn bản chú thích hình ảnh bên trong phương thức.</p> <p>Đừng lo lắng nếu bạn không hiểu mã ngay. Khi bạn hoàn tất CSS, hãy truy cập Hướng dẫn JavaScript của chúng tôi để tìm hiểu thêm.</p> <img id="myImg" src="img_lights.jpg" alt="Northern Lights, Na Uy" width="300" Height=" 200"> <!-- Phương thức --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id= "img01"> <div id="caption"></div> </div> <script> // Lấy phương thức var modal = document.getElementById('myModal'); // Lấy hình ảnh và chèn nó vào trong modal - sử dụng văn bản "alt" của nó làm chú thích var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("chú thích"); img.onclick = function(){ modal.style.display = "chặn"; modalImg.src = this.src; chú thíchText.innerHTML = this.alt; } // Lấy phần tử <span> để đóng modal var span = document.getElementsByClassName("close")[0]; // Khi người dùng nhấp vào <span> (x), hãy đóng modal span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>