Có các thuộc tính CSS, chẳng hạn như hình nền, hình ảnh viền, mặt nạ và các thuộc tính cắt, mà bạn có thể trực tiếp thêm hình ảnh đến các trang web và kiểm soát hành vi của họ. Tuy nhiên, cũng có các thuộc tính CSS liên quan đến hình ảnh ít được đề cập hơn làm việc trên hình ảnh được thêm vào với Thẻ HTML, Đó là cách ưa thích để thêm hình ảnh vào các trang web.
Mô tả công việc của các thuộc tính sau này khác nhau từ kiểm soát bóng hình ảnh đến thiết lập độ sắc nét, giúp chúng tôi kiểm soát tốt hơn sự xuất hiện và vị trí của hình ảnh được thêm vào nhãn. Chúng ta hãy xem từng người một.
1. Làm sắc nét hình ảnh với kết xuất hình ảnh
Khi một hình ảnh được nâng cấp, trình duyệt làm mịn hình ảnh, vì vậy nó không nhìn pixelated. Nhưng, 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 kết xuất hình ảnh bất động sản.
Khách sạn được hỗ trợ tốt này kiểm soát thuật toán được sử dụng để chia tỷ lệ hình ảnh. Hai giá trị chính của nó là cạnh sắc nét và pixelated.
Các cạnh sắc nét giá trị duy trì độ tương phản màu giữa các pixel. Nói cách khác, không làm mịn đối với hình ảnh, mà tuyệt vời cho tác phẩm nghệ thuật pixel.
Khi nào pixelated được sử dụng, các pixel gần đó của một pixel có thể chiếm diện mạo của nó, làm cho nó có vẻ như cùng nhau tạo thành một pixel lớn, tuyệt vời cho màn hình độ phân giải cao.
Nếu bạn cứ nhìn kỹ vào các cạnh hoa trong GIF bên dưới, bạn có thể thấy sự khác biệt giữa thông thường và pixelated hình ảnh.
img kết xuất hình ảnh: pixelated;
2. Kéo dài hình ảnh với phù hợp với đối tượng
Các chứa, che, lấp đầy các giá trị đều quen thuộc, chúng tôi sử dụng chúng cho kích thước nền thuộc tính kiểm soát cách một hình ảnh nền lấp đầy phần tử mà nó thuộc về. Các phù hợp với đối tượng tài sản khá giống với nó, vì nó cũng xác định làm thế nào một kích thước hình ảnh bên trong container của nó.
Các chứa giá trị chứa hình ảnh trong thùng chứa của nó. che không giống nhau, nhưng nếu tỷ lệ khung hình của ảnh và vùng chứa không khớp nhau, thì hình ảnh bị cắt. lấp đầy làm cho hình ảnh kéo dài và điền vào thùng chứa của nó. giảm quy môchọn phiên bản nhỏ nhất của hình ảnh để hiển thị.
Tương tự như bổ sung vị trí nền tài sản của kích thước nền, có một vị trí đối tượng tài sản cho phù hợp với đối tượng, quá.
Các phù hợp với đối tượng bất động sản di chuyển một hình ảnh bên trong một thùng chứa hình ảnh theo tọa độ đã cho. Các tọa độ có thể được định nghĩa là đơn vị chiều dài tuyệt đối, đơn vị chiều dài tương đối, từ khóa (hàng đầu, trái, trung tâm, dưới cùng, và đúng) hoặc sự kết hợp hợp lệ của chúng (đầu 20px đúng 5px, trung tâm bên phải 80px).
#container width: 300px; chiều cao: 300px; img chiều rộng: 100%; chiều cao: 100%; vị trí đối tượng: 150px 0;
4. Tình huống hình ảnh với căn dọc
Chúng tôi đôi khi thêm (bản chất là nội tuyến) bên cạnh chuỗi văn bản để thêm thông tin hoặc trang trí. Trong trường hợp đó, căn chỉnh văn bản và hình ảnh vào vị trí mong muốn có thể là một chút khó khăn - nếu bạn không biết nên sử dụng thuộc tính nào.
Các căn dọc tài sản là không dành riêng cho các tế bào bảng. Nó cũng có thể căn chỉnh một phần tử nội tuyến trong một hộp nội tuyến, và do đó có thể được sử dụng để căn chỉnh một hình ảnh trong một dòng văn bản. Phải mất một số lượng giá trị hợp lý có thể được áp dụng cho một phần tử nội tuyến, do đó bạn có nhiều tùy chọn để chọn.
PDF
5. Hình ảnh bóng với bộ lọc: bóng đổ ()
Khi được sử dụng không rõ ràng trong các văn bản và hộp, bóng 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 với hình dạng cốt lõi và nền trong suốt có thể hưởng lợi từ bóng đổ Bộ lọc CSS.
Đối số của nó là tương tự như các giá trị của các thuộc tính CSS liên quan đến bóng (bóng văn bản, bóng hộp). Hai cái đầu đại diện cho khoảng cách dọc và ngang giữa bóng tối và hình ảnh, thứ ba và thứ tư là mơ hồ và bán kính lan rộng của bóng tối, và cái cuối cùng là màu bóng.
Giống như bóng văn bản, bóng đổ cũng tạo ra một cái bóng đúc cho các đố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 hiển thị của hình ảnh.
#container width: 300px; chiều cao: 300px; img chiều rộng: 100%; chiều cao: 100%; đối tượng phù hợp: chứa;
#container width: 300px; chiều cao: 300px; img chiều rộng: 100%; chiều cao: 100%; đối tượng phù hợp: chứa; 
