Làm thế nào để bạn phản ánh một hình ảnh trong css?

Sự xuất hiện của một trang web là rất quan trọng nếu bạn có ý định thu hút ngày càng nhiều khán giả đến trang web của mình. Do đó, để nâng cao giao diện tổng thể của trang web, việc bổ sung các hiệu ứng đồ họa cho hình ảnh hoặc hình ảnh phản chiếu là rất nên làm. CSS cung cấp các thuộc tính khác nhau cho phép bạn hoàn thành các tác vụ này một cách dễ dàng. Chúng tôi đã thảo luận chi tiết về các thuộc tính này trong bài viết này. Trong bài đăng này, chúng tôi đã thảo luận về những điều sau đây

Bộ lọc hình ảnh trong CSS

Với mục đích thêm các hiệu ứng đặc biệt khác nhau vào hình ảnh chẳng hạn như độ mờ, độ mờ, độ bão hòa, v.v., thuộc tính bộ lọc CSS được sử dụng

cú pháp

bộ lọc. giá trị;

Các phương pháp khác nhau được liên kết với thuộc tính bộ lọc được giải thích bên dưới

ValueDescriptionnoneGiá trị này không thêm hiệu ứng và là giá trị mặc định. blurIt thêm độ mờ cho hình ảnh và hiển thị giá trị bằng pixel. độ sángNó được sử dụng để tăng hoặc giảm độ sáng của hình ảnh và hiển thị các giá trị theo tỷ lệ phần trăm. độ tương phản Giá trị này điều chỉnh độ tương phản của hình ảnh và các giá trị được xác định theo tỷ lệ phần trăm. thang độ xámNó biến đổi một hình ảnh thành một hình ảnh thang độ xám và cũng hiển thị các giá trị theo tỷ lệ phần trăm. hue-rotate Giá trị này được sử dụng để xoay hình ảnh và hiển thị các giá trị theo độ. invertIt đảo ngược các mẫu tồn tại trong hình ảnh và các giá trị được xác định theo tỷ lệ phần trăm. opacity Giá trị này điều chỉnh độ trong suốt của hình ảnh và nhận các giá trị từ 0 đến 1. bão hòaNó làm bão hòa một hình ảnh bằng cách lấy các giá trị theo tỷ lệ phần trăm. nâu đỏ Giá trị này được sử dụng để chuyển đổi hình ảnh thành nâu đỏ và hiển thị các giá trị theo tỷ lệ phần trăm. drop-shadowNó được sử dụng để áp dụng hiệu ứng đổ bóng cho hình ảnh. url() Đây là một chức năng yêu cầu vị trí của tài liệu XML có chứa bộ lọc SVG và có thể hiển thị liên kết đến một thành phần bộ lọc cụ thể. giá trị ban đầu Giá trị này cung cấp cho thuộc tính giá trị ban đầu của nó. inheritGiá trị này kế thừa thuộc tính bộ lọc từ phần tử tổ tiên

Bây giờ bạn đã biết tất cả các giá trị mà thuộc tính bộ lọc có thể hiển thị, bên dưới chúng tôi đã trình bày các giá trị này để bạn hiểu rõ hơn

Đầu tiên và quan trọng nhất, hãy thêm một hình ảnh vào trang web của chúng tôi bằng cách sử dụng HTML cơ bản

HTML

< img src="ô tô. jpg" alt="Xe hơi" >

Here we have simply added an image using the

Hình ảnh đã được thêm vào trang web

Bây giờ, hãy áp dụng các bộ lọc cho hình ảnh này và khám phá các giá trị khác nhau mà thuộc tính bộ lọc có thể hiển thị

Mơ hồ

Chúng tôi đã đặt hiệu ứng mờ thành 2px. Giá trị của phương pháp làm mờ càng nhiều sẽ làm tăng độ mờ

.blur {
    bộ lọc. mờ (2px);
}

đầu ra

Đây là một hình ảnh mờ

độ sáng

Độ sáng của hình ảnh đã được đặt thành 0. 50. Việc giảm giá trị sẽ dẫn đến giảm độ sáng và ngược lại

.brightness {
    bộ lọc. độ sáng (0. 50);
}

đầu ra

Độ sáng của hình ảnh đã được điều chỉnh thành công

Tương phản

Chúng tôi đã đặt độ tương phản của hình ảnh thành 160%. Nếu bạn muốn tăng độ tương phản thì hãy tăng giá trị bao nhiêu tùy ý

.contrast {
    bộ lọc. độ tương phản(160%);
}

đầu ra

Một hiệu ứng tương phản được thêm vào rất dễ dàng

thang độ xám

Hãy cung cấp cho phương thức thang độ xám () một số giá trị và xem những thay đổi trong hình ảnh

.grayscale {
    bộ lọc. thang độ xám(100%);
}

đầu ra

Một hình ảnh màu đã được chuyển đổi thành hình ảnh đen trắng bằng cách sử dụng phương thức thang độ xám () của thuộc tính bộ lọc

Hue-xoay

Chúng tôi đang chỉ định phương thức hue-rotate() 270 độ. Phương pháp này về cơ bản sửa đổi hình ảnh bằng cách xoay hình ảnh xung quanh vòng tròn màu

.hue-rotate {
    bộ lọc. hue-rotate (270deg);
}

đầu ra

Đây là một hình ảnh với hue-rotation 270 độ

Đảo ngược

Giá trị đảo ngược thêm một số hiệu ứng đặc biệt cho hình ảnh bằng cách đảo ngược nó. Ở đây chúng tôi đang đảo ngược hình ảnh 80%

.invert {
    bộ lọc. đảo ngược(80%);
}

đầu ra

Các mẫu của hình ảnh đã được đảo ngược

độ mờ

Để làm cho giá trị độ mờ trong suốt của hình ảnh được sử dụng. Dưới đây chúng tôi đang điều chỉnh độ mờ của hình ảnh thành 0. 4. Giá trị của độ mờ càng thấp, hình ảnh sẽ càng trong suốt

.opacity {
    bộ lọc. độ mờ (0. 4);
}

đầu ra

Đây là hình ảnh có độ trong suốt 40%

bão hòa

Để thêm độ bão hòa, phương thức saturate() của thuộc tính bộ lọc được sử dụng. Giá trị càng lớn, độ bão hòa của hình ảnh càng nhiều

.saturate {
    bộ lọc. bão hòa(4);
}

đầu ra

Hiệu ứng bão hòa đã được thêm thành công vào hình ảnh

màu nâu đỏ

Với mục đích thêm hiệu ứng màu nâu đỏ vào hình ảnh, hãy cung cấp cho nó một số giá trị như chúng tôi đã gán cho nó 50% trong đoạn mã bên dưới

.sepia {
    bộ lọc. nâu đỏ(50%);
}

đầu ra

Hiệu ứng nâu đỏ đang hoạt động bình thường

bóng đổ

Để thêm bóng, chúng tôi đang sử dụng phương pháp đổ bóng. Độ dài của bóng đã được chỉ định cho mỗi bên của hình ảnh

.shadow {
    bộ lọc. thả bóng(8px 8px 10px red);
}

đầu ra

Hiệu ứng đổ bóng đã được thêm thành công

Bây giờ chúng ta đã tìm hiểu sâu về thuộc tính bộ lọc, hãy tiếp tục và xem thuộc tính phản ánh là gì

Phản chiếu hình ảnh trong CSS

Với mục đích phản chiếu hình ảnh, thuộc tính phản chiếu hộp CSS được sử dụng

cú pháp

-webkit-box-reflect . bên dưới . ở trên. đúng . trái;

Để thuộc tính này hoạt động đầy đủ trên các trình duyệt khác nhau, nó được sử dụng với tiền tố “-webkit-”

Ghi chú. trình duyệt firefox không hỗ trợ thuộc tính box-refl

Dưới đây chúng tôi đã trình bày một số giá trị này với sự trợ giúp của các ví dụ có liên quan để bạn có thể nắm bắt được khái niệm phản chiếu hình ảnh

Trước tiên hãy thêm một hình ảnh vào trang web của chúng tôi

HTML

< img src="pisa. jpg" alt="Tháp Pisa" chiều rộng="200px" height="200px;">

Ở đây chúng tôi đã thêm một hình ảnh và cung cấp cho nó một số chiều rộng và chiều cao

đầu ra

Một hình ảnh đã được chèn vào trang web

Phía dưới

Chỉ cần gán giá trị “bên dưới” thuộc tính phản chiếu hộp để phản chiếu hình ảnh bên dưới hình ảnh gốc

img {
  -webkit-box-reflect . bên dưới;
}

đầu ra

Hình ảnh đã được phản ánh dưới đây

Đúng

Hãy cùng khám phá giá trị “đúng” của thuộc tính box-refl

img {
  -webkit-box-reflect . đúng;
}

đầu ra

Hình ảnh đã được phản ánh thành công sang bên phải

Phần kết luận

Với mục đích thêm các hiệu ứng đặc biệt cho hình ảnh xuất hiện trên các trang web, thuộc tính bộ lọc CSS được sử dụng. Các phương pháp khác nhau mà thuộc tính này có thể trưng bày là; . Bên cạnh việc thêm các hiệu ứng đặc biệt, bạn cũng có thể phản chiếu hình ảnh bằng cách sử dụng thuộc tính phản chiếu hộp CSS sang phải, trái, trên hoặc dưới. Bài đăng này bao gồm tất cả các chiều sâu của việc thêm bộ lọc hoặc phản chiếu vào hình ảnh với sự trợ giúp của các ví dụ có liên quan

Bạn có thể phản chiếu hình ảnh trong CSS không?

Làm thế nào bạn có thể lật một hình ảnh?

Làm cách nào để xoay hình ảnh bằng CSS?