ภาพ CSS
บทนี้จะแสดงวิธีการใช้ภาพรูปแบบ CSS
เนื้อภาพถ่าย
รูปขนาดย่อ
เราใช้ border คุณสมบัติการสร้างภาพขนาดเล็ก
ตัวอย่าง
ชายแดน: #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>
ลอง»
ภาพที่ตอบสนองต่อ
ภาพการตอบสนองโดยอัตโนมัติจะพอดีกับความหลากหลายของขนาดหน้าจอ
ตัวอย่างเช่นคุณสามารถตั้งค่าเบราว์เซอร์ของคุณเพื่อดูขนาดผลกระทบ:
หากคุณต้องการมีอิสระในการปรับขนาดภาพและภาพเพื่อขยายขนาดของไม่ได้มากขึ้นกว่ามูลค่าสูงสุดของเดิมคุณสามารถใช้รหัสต่อไปนี้:
เคล็ดลับ: เนื้อหาเว็บสามารถตอบสนองต่อการอ้างอิงการออกแบบ CSS ที่ตอบสนองต่อการออกแบบบทเรียน
ข้อความรูปภาพ
วิธีการค้นหาข้อความภาพ:
ตัวอย่าง
ลองดู:
ที่มุมซ้ายด้านบน >> ที่มุมขวาบน» มุมล่างซ้าย» มุมล่างขวา >> ศูนย์ >>บัตรภาพ
ตัวอย่าง
ความกว้าง: 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% สีเทา):
-webkit กรอง: สีเทา (100% ); / * Chrome, Safari, Opera * /
กรอง: สีเทา (100%);
}
ลอง»
เคล็ดลับ: เยี่ยมชม CSS คู่มือการใช้ตัวกรองการอ้างอิง สำหรับเนื้อหาเพิ่มเติม
แกลเลอรี่ภาพที่ตอบสนองต่อ
ตัวอย่าง
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 = "ไม่มี";
}
ลอง»