CSS ตั้งค่ารูปภาพ

เรียนรู้วิธีการใช้ CSS ตั้งค่ารูปภาพ

ภาพที่มีขอบเขตโค้ง

ใช้ border-radius ตั้งค่าของนิยามภาพที่มีขอบเขตโค้ง:

ตัวอย่าง

ภาพที่มีขอบเขตโค้ง:

img {
  border-radius: 8px;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ภาพที่เป็นรูปวงกลม:

img {
  border-radius: 50%;
}

ทดลองด้วยตัวเอง

ภาพย่อ

ใช้ border ตั้งค่าของนิยามภาพย่อ

ภาพย่อ:

Coffee

ตัวอย่าง

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

ทดลองด้วยตัวเอง

ใช้เป็นภาพย่อสำหรับลิงก์:

ตัวอย่าง

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>

ทดลองด้วยตัวเอง

ภาพที่เป็น Responsive

ภาพที่เป็น Responsive จะปรับตัวอัตโนมัติเพื่อให้เหมาะกับขนาดหน้าจอ

ถ้าคุณต้องการที่จะย่อภาพเพื่อใช้งานตามที่ต้องการ แต่ต้องห้ามขยายขนาดเกินขนาดต้นฉบับ โปรดเพิ่มรหัสต่อไปนี้:

ตัวอย่าง

img {
  max-width: 100%;
  height: auto;
}

ทดลองด้วยตัวเอง

คำเตือน：ใน ตัวอย่าง CSS RWD เรียนรู้เพิ่มเติมเกี่ยวกับทฤษฎี Web Responsive ที่เรา

ภาพตั้งตรงกลาง

ถ้าคุณต้องการที่จะทำให้ภาพตั้งตรงกลาง โปรดตั้งค่าขอบเขตด้านข้างในเป็น: auto และตั้งค่ามันเป็นองค์ประกอบบล็อค:

Coffee

ตัวอย่าง

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

ทดลองด้วยตัวเอง

ภาพบอลีเลย์ / ใบปก

Tulip

สีเหลืองทิวแบค

Tulip

สีทองทิวแบค

ตัวอย่าง

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;
}

ทดลองด้วยตัวเอง

มีเดียวที่โปร่งใส

opacity ระยะทางค่าของคุณสมบัติคือ 0.0 - 1.0 ค่าที่ต่ำกว่านี้ จะมีความโปร่งใสมากยิ่งขึ้น:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (ค่าเริ่มต้น)

ตัวอย่าง

img {
  opacity: 0.5;
}

ทดลองด้วยตัวเอง

ข้อความในมีเดียว

ฝากข้อความในภาพ:

ตัวอย่าง

CodeW3C.com Logo
ด้านล่างซ้าย
ด้านบนซ้าย
ด้านบนขวา
ด้านล่างขวา
ตรงกลาง

ลองเดาะเอง:

ด้านบนซ้าย ด้านบนขวา ด้านล่างซ้าย ด้านล่างขวา ตรงกลาง

มีเดียวเฟิร์มวาล์ย

CSS filter คุณสมบัติเพิ่มภาพรวมสไตล์ (เช่น ทุ้มและความชัดเจน) สู่องค์ประกอบ

แจ้งเตือน:Internet Explorer หรือ Edge 12 ไม่สนับสนุนคุณสมบัติ filter

ตัวอย่าง

เปลี่ยนสีของทุกภาพเป็นดำเงาและขาว (100% สีเทา):

img {
  filter: grayscale(100%);
}

ทดลองด้วยตัวเอง

คำเตือน：โปรดเข้าเว็บไซต์ของเรา คู่มืออ้างอิงเฟิร์มวาล์ย CSS，เพื่อได้รับข้อมูลเกี่ยวกับเฟิร์มวาล์ย CSS มากยิ่งขึ้น

การเพิ่มเติมในภาพเมื่อเปลี่ยนลูกศร

สร้างการเพิ่มเติมเมื่อเปลี่ยนลูกศร:

ตัวอย่าง 1

ตัวกรองข้อความที่เรียกมาขึ้น:

Avatar
Hello World

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตัวกรองที่เรียกมาขึ้น:

Avatar
Bill

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เข้ามาด้านบน:

Avatar
Hello World

ทดลองด้วยตัวเอง

ตัวอย่าง 4

เข้ามาด้านล่าง:

Avatar
Hello World

ทดลองด้วยตัวเอง

ตัวอย่าง 5

เข้ามาด้านซ้าย:

Avatar
Hello World

ทดลองด้วยตัวเอง

ตัวอย่าง 6

เข้ามาด้านขวา:

Avatar
Hello World

ทดลองด้วยตัวเอง

เลื่อนภาพ

โปรดเคลื่อนลูกศรไปที่ภาพ:

สวนกีฬา

ตัวอย่าง

img:hover {
  transform: scaleX(-1);
}

ทดลองด้วยตัวเอง

มีเดียวที่ปรับตัวตามสัดส่วน

เราสามารถสร้างแบบภาพที่ปรับตัวตามสัดส่วนด้วย CSS

ตัวอย่างนี้ใช้มีเดียวที่ค้นหามีเดียวเพื่อจัดระเบียบภาพตามขนาดจอต่าง ๆ ของหน้าจอ โปรดปรับขนาดหน้าตัวเครื่องของคุณเพื่อดูผลลัพธ์:

ตัวอย่าง

.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%;
  }
}

ทดลองด้วยตัวเอง

คำเตือน：โปรดมาที่ ตัวอย่าง CSS RWD เรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบเว็บไซต์ที่ตอบสนอง

โมดัลรูปภาพ (Image Modal)

นี่เป็นตัวอย่างของการที่ CSS และ JavaScript ทำงานร่วมกัน

ในตอนแรก โปรดใช้ CSS ทำหน้าต่างโมดัล (โดยทั่วไปแล้ว ซ่อนอยู่)

หลังจากนั้น ในขณะที่ผู้ใช้คลิกที่รูปภาพ ใช้ JavaScript แสดงหน้าต่างโมดัลและแสดงรูปภาพภายในโมดัล:

สนามเทศกาล

ทดลองด้วยตัวเอง