บทช่วยสอน ภาพ CSS ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
เนื้อภาพถ่าย,รูปขนาดย่อ,ภาพที่ตอบสนองต่อ,ข้อความรูปภาพ,บัตรภาพ,ตัวกรองภาพ,แกลเลอรี่ภาพที่ตอบสนองต่อ,รูปภาพ Modal (กิริยา),
ภาพ CSS
บทนี้จะแสดงวิธีการใช้ภาพรูปแบบ CSS
เนื้อภาพถ่าย
ตัวอย่าง
รูปภาพเนื้อ:
img {
border-radius: 8px;
}
ลอง» ตัวอย่าง
รูปวงรี:
img {
border-radius: 50%;
}
ลอง»
รูปขนาดย่อ
เราใช้ border
คุณสมบัติการสร้างภาพขนาดเล็ก
ตัวอย่าง
img {
ชายแดน: #ddd 1px ของแข็ง
border-radius: 4px;
padding: 5px;
}
<img src = "paris.jpg" alt = "ปารีส">
ลอง» ตัวอย่าง
ก {
จอแสดงผล: อินไลน์บล็อก
ชายแดน: #ddd 1px ของแข็ง
border-radius: 4px;
padding: 5px;
การเปลี่ยนแปลง: 0.3s;
}
A: โฉบ {
กล่องเงา: 0 0 2px 1px RGBA
(0, 140, 186, 0.5);
}
<A href = "paris.jpg">
<img src = "paris.jpg" alt = "ปารีส">
</ A>
ลอง»
ภาพที่ตอบสนองต่อ
ภาพการตอบสนองโดยอัตโนมัติจะพอดีกับความหลากหลายของขนาดหน้าจอ
ตัวอย่างเช่นคุณสามารถตั้งค่าเบราว์เซอร์ของคุณเพื่อดูขนาดผลกระทบ:
หากคุณต้องการมีอิสระในการปรับขนาดภาพและภาพเพื่อขยายขนาดของไม่ได้มากขึ้นกว่ามูลค่าสูงสุดของเดิมคุณสามารถใช้รหัสต่อไปนี้:
ตัวอย่าง
img {
ความกว้างสูงสุด: 100%;
ความสูง: อัตโนมัติ
}
ลอง» เคล็ดลับ: เนื้อหาเว็บสามารถตอบสนองต่อการอ้างอิงการออกแบบ CSS ที่ตอบสนองต่อการออกแบบบทเรียน
ข้อความรูปภาพ
วิธีการค้นหาข้อความภาพ:
บัตรภาพ
ตัวอย่าง
div.polaroid {
ความกว้าง: 80%;
สีพื้นหลัง: สีขาว;
กล่องเงา: 0 4px 8px 0 RGBA (0, 0, 0, 0.2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
}
img {ความกว้าง: 100%}
div.container {
text-align: ศูนย์;
padding: 10px 20px;
}
ลอง»
ตัวกรองภาพ
ซีเอสเอ filter
แอตทริบิวต์เพิ่มองค์ประกอบที่มีผลภาพ (ตัวอย่างเช่น: ฟัซซี่และความอิ่มตัว)
หมายเหตุ: Internet Explorer หรือ Safari 5.1 (และก่อนหน้า) ไม่สนับสนุนคุณสมบัตินี้
ตัวอย่าง
แก้ไขทุกสีภาพสีดำและสีขาว (100% สีเทา):
img {
-webkit กรอง: สีเทา (100% ); / * Chrome, Safari, Opera * /
กรอง: สีเทา (100%);
}
ลอง» เคล็ดลับ: เยี่ยมชม CSS คู่มือการใช้ตัวกรองการอ้างอิง สำหรับเนื้อหาเพิ่มเติม
แกลเลอรี่ภาพที่ตอบสนองต่อ
ตัวอย่าง
.responsive {
padding: 0 6px;
ลอย: ด้านซ้าย;
ความกว้าง: 24.99999%;
}
@media เพียงหน้าจอและ (ความกว้างสูงสุด : 700px) {
.responsive {
ความกว้าง: 49.99999%;
margin: 6px 0;
}
}
@media เพียงหน้าจอและ (ความกว้างสูงสุด : 500px) {
.responsive {
ความกว้าง: 100%;
}
}
ลอง»
รูปภาพ Modal (กิริยา)
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการรวมเข้าด้วยกัน CSS และ JavaScript ในการแสดงผลภาพ
ครั้งแรกที่เราใช้ CSS เพื่อสร้างหน้าต่างกิริยา A (โต้ตอบ) ถูกซ่อนไว้โดยค่าเริ่มต้น
จากนั้นเราจะใช้ JavaScript เพื่อแสดงหน้าต่างกิริยาเมื่อเราคลิกภาพที่จะปรากฏในหน้าต่างป๊อปอัพ:
ตัวอย่าง
// รับหน้าต่างกิริยา
var กิริยา = document.getElementById ( 'myModal' );
// รับโหมดกรอบรูป, ภาพคุณลักษณะ alt ตามที่อธิบายไว้ใน pop จีนปัจจุบัน
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var captionText = document.getElementById ( "คำบรรยายภาพ" );
img.onclick = function () {
modal.style.display = "บล็อก";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// รับ <span> องค์ประกอบที่ ปิดกิริยา
ช่วง var = document.getElementsByClassName ( "ปิด" ) [0];
// เมื่อผู้ใช้คลิกที่ <span > (x) ปิดกิริยา
span.onclick = function () {
modal.style.display = "ไม่มี";
}
ลอง»