Pengaturan gaya gambar CSS

Belajar bagaimana menggunakan CSS untuk menata gaya gambar.

Gambar rounded

gunakan border-radius properti untuk membuat gambar rounded:

实例

Gambar rounded:

img {
  border-radius: 8px;
}

Coba Sendiri

实例

Gambar lingkaran:

img {
  border-radius: 50%;
}

Coba Sendiri

gambar thumbnail

gunakan border properti untuk membuat thumbnail.

Thumbnail:

Kopi

实例

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

Coba Sendiri

sebagai thumbnail untuk tautan:

实例

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>

Coba Sendiri

Gambar responsif

Gambar responsif akan otomatis disesuaikan untuk ukuran layar.

Jika Anda ingin memperkecil gambar sesuai dengan kebutuhan tetapi menghindari pengembangan yang lebih besar daripada ukuran asli, tambahkan kode berikut:

实例

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

Coba Sendiri

Petunjuk:di Tutorial CSS RWD Belajar lebih banyak tentang desain Web responsif di

Tengahkan gambar

Untuk membuat gambar tengah, atur marjin kiri dan kanan menjadi auto dan aturnya sebagai elemen blok:

Kopi

实例

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

Coba Sendiri

Gambar Polaroid / Kartu

Tulip

Tulip kuning

Tulip

Tulip merah

实例

div.polaroid {
  width: 80%;
  background-color: putih;
  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;
}

Coba Sendiri

透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1（默认）

实例

img {
  opacity: 0.5;
}

Coba Sendiri

图像文本

如何在图像中定位文本：

实例

Logo CodeW3C.com
Bottom Left
Top Left
Top Right
Bottom Right
Centered

亲自试一试：

左上 右上 左下 右下 居中

图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

注意：Internet Explorer 或 Edge 12 不支持 filter 属性。

实例

把所有图像的颜色更改为黑白（100％ 灰色）：

img {
  filter: grayscale(100%);
}

Coba Sendiri

Petunjuk:请访问我们的 CSS 滤镜参考手册，了解有关 CSS 滤镜的更多信息。

图像悬停叠加

创建鼠标悬停时的叠加效果：

实例 1

淡入文本：

Avatar
Hello World

Coba Sendiri

实例 2

淡入框：

Avatar
Bill

Coba Sendiri

实例 3

滑入（上）：

Avatar
Hello World

Coba Sendiri

实例 4

滑入（下）：

Avatar
Hello World

Coba Sendiri

实例 5

滑入（左）：

Avatar
Hello World

Coba Sendiri

实例 6

滑入（右）：

Avatar
Hello World

Coba Sendiri

翻转图像

请把鼠标移到图像上：

Taman Olahraga

实例

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

Coba Sendiri

响应式图库

我们可以使用 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%;
  }
}

Coba Sendiri

Petunjuk:Silakan di Tutorial CSS RWD Belajar lebih banyak tentang Desain Web Berresponsi di sini.

Modal Gambar (Image Modal)

Ini adalah contoh bagaimana CSS dan JavaScript bekerja bersama-sama.

Pertama, gunakan CSS untuk membuat jendela modal (dialog) dan jadikannya tersembunyi secara default.

Lalu, ketika pengguna mengeklik gambar, tampilkan jendela modal menggunakan JavaScript dan tampilkan gambar didalam modal:

Lapangan Rumput

Coba Sendiri