Opacity la gi

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • opacity

opacity là gì?

Trước đây để làm trong suốt một đối tượng nào đó, thì ta cần phải sử dụng hình ảnh với định dạng PNG hoặc GIF, nhưng với CSS3 thì việc này vô cùng đơn giản, chỉ với thuộc tính opacity là bạn đã hiệu chỉnh được độ trong suốt bất kỳ thành phần nào một cách dễ dàng.

Cấu trúc

tag { opacity: giá trị; }

Giá trịĐơn vịVDMô tả
Giá trị 0.6 opacity: 0.6; Có giá trị từ 0 tới 1.
  • 0: trong suốt hoàn toàn
  • 1: không trong suốt

Cách sử dụng

HTML viết:

Nội dung bên dưới

Opacity la gi

CSS viết - khi chưa sử dụng opacity:

div { height: 140px; position: relative; } div .text { color: #000; font-size: 30px; font-weight: bold; } div .image { left: 0; position: absolute; top: 0; }

Hiển thị trình duyệt:

Nội dung bên dưới

Opacity la gi

Bây giờ ta sẽ sử dụng opacity để xem kết quả như thế nào nhé:

CSS viết:

div { height: 140px; position: relative; } div .text { color: #000; font-size: 30px; font-weight: bold; } div .image { left: 0; opacity: 0.7; position: absolute; top: 0; }

Hiển thị trình duyệt:

Nội dung bên dưới

Opacity la gi

Ta thấy tấm hình đã được trong suốt, và có thể thấy nọi dung text bên dưới. Để hiểu rõ hơn về opacity, ta xem thêm ví dụ sau:

Ví dụ thêm - Một số opacity thường dùng

Opacity la gi

Opacity la gi

Opacity la gi

Opacity la gi

Thay đổi giảm dần giá trị opacity

p { margin-bottom: 5px; } .image01 { opacity: 1; } .image02 { opacity: 0.7; } .image03 { opacity: 0.4; } .image04 { opacity: 0.1; }

Các bạn có thể xem thêm tại tham khảo opacity.

Opacity là gì? Và làm cách nào để sử dụng Opacity một cách hiệu quả nhất trong Photoshop. ITPlus Academy sẽ chia sẻ cho các bạn. Các bạn theo dõi nhé.

Opacity là gì?

Khi các bạn muốn đối tượng hiển thị rõ ràng, đậm nét thì bạn tăng Opacity và khi bạn muốn đối tượng sẽ mờ đi, nhạt màu thì bạn giảm Opacity, thậm chí đối tượng sẽ trở nên trong suốt, biến mất nếu bạn giảm hết độ Opacity xuống còn 0%. Cho nên, Opacity được hiểu là độ đậm nhạt của đối tượng.

Khóa học thiết kế đồ họa chuyên nghiệp

Khóa học dựng phim với phần mềm Adobe Affer Effect

Khóa học lllustrator 

Opacity la gi

Sử dụng độ Opacity như thế nào?

Từ thanh Menu tới thanh tùy chọn và  bảng layer trong Photoshop thì Opacity có mặt ở khắp nơi. Trong Phtoshop thì Opacity có mặt ở hầu như tất cả các công cụ mà chúng ta sử dụng.

Giá trị Opacity là 100% đều được mặc định tất những ảnh bạn đưa vào thiết kế Photoshop. Khi đưa vào Photoshop giá trị này tương ứng với độ nét ban đầu của ảnh.

Opacity la gi

Khi giảm Opacity của ảnh xuống còn 30% thì bức ảnh ở trên các bạn có thể thấy bị mờ đi khá nhiều.

Độ Opacity sẽ giúp bạn điều chỉnh độ đậm nhạt của màu sắc trước khi sử dụng thì trong một số công cụ cần lựa chọn màu sắc như Pencil Tool, Brush Tool, , Gradient Tool…

Opacity và Fill có gì khác nhau?

Ngay bên dưới Opacity  là mục Fill  khi bạn nhìn vào nó trong bảng layer và mục này cũng có giá trị 100% giống như Opacity, và hơn thế là nó cũng có công dụng làm mờ đối tượng như Opacity. Vậy tại sao Photoshop phải mất công chia ra thành 2 công cụ như thế, phải chăng là để hiển thị cho đẹp?

Cho dù Opacity và Fill đều có tác dụng làm mờ đối tượng và có thông sô giống nhau nhưng nếu như bạn giảm độ Opacity của 1 hình ảnh thì cả hình ảnh đó sẽ bị mờ đi do Opacity ảnh hưởng tới toàn bộ đối tượng.còn đối với Fill nếu bạn giảm độ Fill của hình ảnh đó thì chỉ có nền của hình ảnh đó bị mờ thôi, còn viền (nếu có) của hình ảnh đó được giữ nguyên.

Opacity la gi

Chữ Photoshop và hình tròn bên trên trong bức ảnh trên được giảm Opacity thì cả nền và viền đều bị mờ đi. Còn chữ Photoshop và hình tròn bên dưới được giảm Fill thì chỉ có nền bị mờ, đường viền vẫn giữ nguyên độ rõ nét.

Hiểu đơn giản thì  Fill chỉ ảnh hưởng tới nền của đối tượng  còn Opacity sẽ ảnh hưởng tới cả đối tượng, đối tượng sẽ không bị ảnh hưởng bởi độ Fill nếu đường viền xung quanh (ví dụ như viền chữ, viền ảnh, viền hình vẽ…).

Hy vọng bài viết này sẽ giúp bạn hiểu rõ về Opacity trong Photoshop! Chúc các bạn thành công!

Ban truyền thông ITPlus