CSS - Hình ảnh: Hướng dẫn cơ bản cho việc làm nổi bật các trang web của bạn!

Xin chào các ngôi sao thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của hình ảnh CSS. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể làm cho các trang web của mình trông tuyệt vời với những hình ảnh được stylized hoàn hảo. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu hành trình thú vị này nhé!

CSS - Images

Hiểu về cơ bản

Trước khi chúng ta nhảy vào chi tiết, hãy dành một lúc để hiểu CSS là gì và tại sao nó lại quan trọng khi làm việc với hình ảnh. CSS viết tắt của Cascading Style Sheets, và nó giống như nhà thiết kế thời trang cho nội dung HTML của bạn. Nó告诉 trình duyệt web của bạn cách hiển thị các phần tử trên trang của bạn, bao gồm cả hình ảnh.

Bây giờ, hãy bắt đầu với một số thuộc tính cơ bản để stylize hình ảnh:

Chiều cao và chiều rộng của hình ảnh CSS

Khi nói đến hình ảnh, kích thước rất quan trọng! Hãy cùng xem cách chúng ta có thể kiểm soát kích thước hình ảnh của mình bằng CSS.

Chiều cao của hình ảnh CSS

Để đặt chiều cao của một hình ảnh, chúng ta sử dụng thuộc tính height. Dưới đây là một ví dụ:

img {
  height: 300px;
}

Điều này sẽ đặt chiều cao của tất cả các phần tử <img> thành 300 pixel. Nhưng nếu chúng ta muốn làm cho hình ảnh của mình linh hoạt? Chúng ta có thể sử dụng phần trăm:

img {
  height: 50%;
}

Điều này sẽ làm cho chiều cao của hình ảnh bằng 50% chiều cao của container của nó. Đẹp phải không?

Chiều rộng của hình ảnh CSS

Tương tự, chúng ta có thể kiểm soát chiều rộng của hình ảnh bằng thuộc tính width:

img {
  width: 500px;
}

Or for a responsive approach:

img {
  width: 100%;
}

Điều này sẽ làm cho hình ảnh chiếm toàn bộ chiều rộng của container của nó.

Viền của hình ảnh CSS

Muốn thêm một khung thời trang cho hình ảnh của bạn? CSS đã có cho bạn với thuộc tính border!

img {
  border: 2px solid #333;
}

Điều này sẽ thêm một viền rộng 2 pixel, solid đen xung quanh hình ảnh của bạn. Bạn có thể sáng tạo với các kiểu viền khác nhau như dashed, dotted, hoặc thậm chí là groove!

Góc bo tròn của hình ảnh CSS

Để làm cho hình ảnh của bạn có các góc tròn mịn, sử dụng thuộc tính border-radius:

img {
  border-radius: 10px;
}

Muốn tạo một hình ảnh tròn? Đặt border-radius thành 50%:

img {
  border-radius: 50%;
}

Độ trong suốt của hình ảnh CSS

Đôi khi, bạn có thể muốn làm cho hình ảnh của mình稍微 trong suốt. Thuộc tính opacity là bạn của bạn ở đây:

img {
  opacity: 0.5;
}

Điều này sẽ làm cho hình ảnh của bạn 50% trong suốt. Giá trị dao động từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).

Đặt kích thước của hình ảnh CSS

Thuộc tính object-fit rất hữu ích khi bạn muốn kiểm soát cách hình ảnh nên thay đổi kích thước để phù hợp với container của nó:

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

Điều này sẽ đảm bảo hình ảnh của bạn che kín toàn bộ khu vực 300x300 pixel mà không bị kéo dãn hoặc nén.

Vị trí của hình ảnh CSS

Để kiểm soát vị trí của hình ảnh trong container của nó, sử dụng thuộc tính object-position:

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: top left;
}

Điều này sẽ đặt hình ảnh ở góc trên bên trái của container.

Bộ lọc của hình ảnh CSS

Muốn thêm một số hiệu ứng cool vào hình ảnh của bạn? Các bộ lọc CSS sẽ cứu bạn! Dưới đây là một ví dụ áp dụng bộ lọc grayscale:

img {
  filter: grayscale(100%);
}

Điều này sẽ chuyển hình ảnh đầy màu sắc của bạn thành một bức ảnh đen trắng cổ điển.

Hiệu ứng bóng của hình ảnh CSS

Để thêm một阴影微妙 vào hình ảnh của bạn và làm cho nó nổi bật, sử dụng thuộc tính box-shadow:

img {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Điều này tạo ra một bóng mờ mềm 5 pixel bên phải và 5 pixel dưỡ xuống từ hình ảnh.

Hình ảnh làm nền CSS

Đôi khi, bạn có thể muốn sử dụng một hình ảnh làm nền cho một div hoặc toàn bộ trang. Dưới đây là cách bạn có thể làm điều đó:

.hero-section {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
}

Điều này tạo ra một section hero với hình ảnh nền che kín toàn bộ khu vực và được căn giữa.

Thuộc tính của hình ảnh CSS - Tóm tắt

Hãy tóm tắt tất cả các thuộc tính chúng ta đã học trong một bảng tiện lợi:

Thuộc tính	Mô tả	Ví dụ
`height`	Đặt chiều cao của hình ảnh	`height: 300px;`
`width`	Đặt chiều rộng của hình ảnh	`width: 100%;`
`border`	Thêm viền xung quanh hình ảnh	`border: 2px solid #333;`
`border-radius`	Làm tròn các góc của hình ảnh	`border-radius: 10px;`
`opacity`	Điều chỉnh độ trong suốt của hình ảnh	`opacity: 0.5;`
`object-fit`	Chỉ định cách hình ảnh thay đổi kích thước	`object-fit: cover;`
`object-position`	Đặt vị trí của hình ảnh trong container	`object-position: top left;`
`filter`	Áp dụng các hiệu ứng thị giác vào hình ảnh	`filter: grayscale(100%);`
`box-shadow`	Thêm hiệu ứng bóng vào hình ảnh	`box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);`
`background-image`	Đặt một hình ảnh làm nền	`background-image: url('image.jpg');`

Và thế là bạn đã có nó, các bạn! Bây giờ bạn đã được trang bị kiến thức để làm cho hình ảnh của mình trông tuyệt vời trên các trang web của bạn. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngại thử nghiệm với các thuộc tính này và tạo ra những phong cách độc đáo của riêng bạn.

Như tôi luôn nói với học sinh của mình, thiết kế web giống như nấu ăn - bạn bắt đầu với các nguyên liệu cơ bản (HTML), thêm một chút hương vị (CSS), và trước khi bạn biết, bạn đang tạo ra những kiệt tác không chỉ trông đẹp mà còn "thơm ngon" nữa (tất nhiên là theo nghĩa黑的).!

Vậy hãy đi tiếp, các học trò trẻ, và chúc các bạn may mắn với CSS! Chúc các bạn vui vẻ khi code!

Credits: Image by storyset