CSS đặt樣式 hình ảnh

Học cách sử dụng CSS để đặt樣式 hình ảnh.

Hình ảnh bo góc

sử dụng border-radius tạo hình ảnh bo góc bằng thuộc tính:

thực hành

Hình ảnh bo góc:

img {
  border-radius: 8px;
}

親自試一試

thực hành

Hình ảnh tròn:

img {
  border-radius: 50%;
}

親自試一試

ảnh thu nhỏ

sử dụng border tạo ảnh thu nhỏ bằng thuộc tính.

Ảnh thu nhỏ:

Coffee

thực hành

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

親自試一試

Là ảnh thu nhỏ của liên kết:

thực hành

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>

親自試一試

Hình ảnh tương ứng

Hình ảnh tương ứng sẽ tự động điều chỉnh để phù hợp với kích thước màn hình.

Nếu bạn muốn thu nhỏ hình ảnh theo nhu cầu nhưng không muốn phóng to lớn hơn kích thước ban đầu, hãy thêm mã sau:

thực hành

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

親自試一試

提示：Tại CSS RWD 教程 Học thêm về thiết kế Web tương ứng tại đây.

Đặt hình ảnh ở giữa

Nếu bạn muốn đặt hình ảnh ở giữa, hãy đặt biên mép bên trái và bên phải thành: auto và đặt nó thành phần block:

Coffee

thực hành

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

親自試一試

Hình ảnh Polaroid / thẻ

Tulip

Tulip vàng

Tulip

Tulip đỏ

thực hành

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

親自試一試

Hình ảnh trong suốt

opacity Giá trị của thuộc tính này trong khoảng 0.0 - 1.0. Giá trị thấp hơn thì trong suốt hơn:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (mặc định)

thực hành

img {
  opacity: 0.5;
}

親自試一試

Văn bản hình ảnh

Cách định vị văn bản trong hình ảnh:

thực hành

Logo của CodeW3C.com
Dưới trái
Trên trái
Trên phải
Dưới phải
Giữa

Hãy thử trực tiếp:

Trên trái Trên phải Dưới trái Dưới phải Giữa

Bộ lọc hình ảnh

CSS filter Thuộc tính thêm hiệu ứng thị giác (như mờ và độ bão hòa) vào phần tử.

Lưu ý:Internet Explorer hoặc Edge 12 không hỗ trợ thuộc tính filter.

thực hành

Thay đổi màu sắc của tất cả các hình ảnh thành đen trắng (100% xám):

img {
  filter: grayscale(100%);
}

親自試一試

提示：Hãy truy cập trang web của chúng tôi Tài liệu tham khảo bộ lọc CSS，để biết thêm thông tin về bộ lọc CSS.

Hiệu ứng đính kèm hình ảnh khi di chuột trỏ

Tạo hiệu ứng đính kèm khi con trỏ chuột chạm vào:

thực hành 1

Vòng mờ văn bản:

Avatar
Hello World

親自試一試

thực hành 2

Vòng mờ vào:

Avatar
Bill

親自試一試

thực hành 3

Cuộn vào (trên):

Avatar
Hello World

親自試一試

thực hành 4

Cuộn vào (dưới):

Avatar
Hello World

親自試一試

thực hành 5

Cuộn vào (trái):

Avatar
Hello World

親自試一試

thực hành 6

Cuộn vào (phải):

Avatar
Hello World

親自試一試

lật hình ảnh

Hãy di chuột vào hình ảnh:

Công viên Thể thao

thực hành

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

親自試一試

Thư viện hình ảnh phản hồi

Chúng ta có thể sử dụng CSS để tạo thư viện hình ảnh tự động điều chỉnh.

Ví dụ này sử dụng truy vấn truyền thông để sắp xếp lại hình ảnh ở các kích thước màn hình khác nhau. Hãy điều chỉnh kích thước cửa sổ trình duyệt để xem hiệu ứng:

thực hành

.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 教程 中學習有關響應式 Web 設計的更多知識。

圖像模態（Image Modal）

這是一個演示 CSS 和 JavaScript 如何協同工作的例子。

首先，請使用 CSS 創建模態窗口（對話框），並默認將其隱藏。

然後，當用戶單擊圖像時，使用 JavaScript 顯示模態窗口並在模態內部顯示圖像：

Sân cỏ xanh

親自試一試