Khi một hình ảnh được phóng to, trình duyệt làm mịn hình ảnh, do đó, nó không nhìn pixelated. Tuy nhiên, tùy thuộc vào độ phân giải của hình ảnh và màn hình, điều này có thể không phải là tốt nhất mọi lúc. Bạn có thể kiểm soát hành vi trình duyệt này với thuộc tính hiển thị hình ảnh.

Thuộc tính được hỗ trợ tốt này điều khiển thuật toán được sử dụng để phóng to một hình ảnh. Hai giá trị chính của nó là crisp-edges và pixelated

Giá trị crisp-edges duy trì độ tương phản giữa các điểm ảnh. Nói cách khác, không làm mịn được thực hiện cho hình ảnh, mà tuyệt vời cho điểm ảnh nghệ thuật.

Khi pixelated được sử dụng, các điểm ảnh gần đó của một điểm ảnh có thể chiếm diện mạo của nó, làm cho nó giống như nhau tạo thành một pixel lớn, tuyệt vời cho màn hình có độ phân giải cao.

Nếu bạn tiếp tục xem xét chặt chẽ các cạnh hoa trong GIF bên dưới, bạn có thể thấy sự khác biệt giữa hình ảnh bình thường và hình ảnh có pixelated.

img {
  image-rendering: pixelated;
}

2. Giãn các hình ảnh với object-fit

contain, cover, fill các giá trị đều quen thuộc, chúng tôi sử dụng chúng cho thuộc tính background-size để kiểm soát cách một hình nền điền vào phần tử nó thuộc về. Thuộc tính object-fit tương đối giống với nó, vì nó cũng xác định cách kích thước hình ảnh bên trong vùng chứa của nó.

Giá trị contain chứa hình ảnh trong vùng chứa của nó. cover không giống nhau, nhưng nếu tỉ lệ co hình ảnh và vùng chứa không khớp, hình ảnh sẽ bị cắt bớt. fill làm cho hình ảnh để căng và điền vào container. scale-down chọn phiên bản nhỏ nhất của hình ảnh để hiển thị.

  



# container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

3. Thay đổi hình ảnh với object-position

Tương tự như thuộc tính background-position bổ sung của background-size, cũng có một thuộc tính object-position cho object-fit phù hợp.

Thuộc tính object-fit di chuyển một hình ảnh bên trong một image container đến các toạ độ nhất định. Các tọa độ có thể được định nghĩa là các đơn vị độ dài tuyệt đối, các đơn vị chiều dài tương đối, các từ khoá (top, left, center, bottom, và right), hoặc sự kết hợp hợp lệ của chúng (top 20px right 5px, center right 80px).

  



# container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

4. Vị trí hình ảnh với vertical-align

Thỉnh thoảng chúng tôi thêm

5. Shadow hình ảnh với filter: drop-shadow()

Khi được sử dụng không chú ý trong văn texts và boxes, shadow có thể thêm sự sống vào một trang web. Điều này cũng đúng với hình ảnh. Hình ảnh có hình dạng lõi và nền trong suốt có thể có lợi từ drop-shadow CSS filter. Đối số của nó tương tự như các giá trị của thuộc tính CSS shadow-related (text-shadow, box-shadow). Hai phần đầu tiên biểu diễn khoảng cách dọc và ngang giữa các shadow và hình ảnh, thứ ba và thứ tư là độ mờ và bán kính rải của shadow, và màu cuối cùng là màu shadow.

Giống như text-shadow, drop-shadow cũng tạo ra một cái bóng được đúc khuôn cho đối tượng thuộc. Vì vậy, khi nó được áp dụng cho một hình ảnh, bóng sẽ có hình dạng của phần hình ảnh nhìn thấy được.

Bài viết này chúng ta sẽ cùng tìm hiểu về cách tạo màu nền và ảnh nền cho các thành phần trên trang web với thuộc tính background trong CSS.

1. Cách tạo màu nền (Background Color)

Thuộc tính background-color xác định màu nền cho một thành phần nào đó khi được chỉ định Đoạn mã sau sẽ quy định màu nền của toàn bộ trang web là màu đen

body {background-color:

000000}

Các giá trị của background-colorcó thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ:

  000000

• transparent: trong suốt (đây là một giá trị đặc biệt của background-color).

2. Cách tạo ảnh nền (Background Image)

Để tạo ảnh nền cho một thành phần nào đó, ta chỉ cần khai báo thuộc tính background-imgde cho thành phần đó. Ví dụ:

body { background-image: url(background.gif) }

Với background.gif là file hình được đặt chung với thư mục chứa file CSS.

Ví dụ background image

Hình bên là một ví dụ thường thấy về background image mà chúng ta thường thấy trên các trang web Ở đây thành phần tiêu đề được sử dụng một ảnh nền.

3. Background repeat

css background repeat

Khi sử dụng một ảnh làm nền, nếu ảnh đó có kích thước nhỏ hơn độ lớn của thành phần đó thì ảnh nền sẽ được lặp lại để phủ kín không gian còn lại. Thuộc tính background-repeat cho phép ta kiểm soát sự lặp lại của ảnh nền. Thuộc tính này có 4 thuộc tính như sau: – repeat-x: chỉ lặp lại theo phương nằm ngang (như hình bên) – repeat-y: chỉ lặp lại theo phương đúng – repeat: lặp lại theo cả 2 phương, đây là giá trị mặt định khi thuộc tính background-repeat không được khai báo. – no-repeat: không lặp lại.

Ở ví dụ dưới đây mình có một tấm hình có kích thước 65x35px để làm nền cho một thành phần

có độ rộng 170px và độ cao 150px. Khi khai báo thuộc tính background-repeat sẽ có các kết quả tương ứng sau đây: