Thuộc tính CSS fill-opacity điều chỉnh độ trong suốt của màu sắc điền vào hình dạng SVG hoặc canvas. Giá trị của nó nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục). Điều này cho phép bạn tạo ra các hiệu ứng mờ dần tinh tế hoặc làm nổi bật các phần tử đồ họa một cách hiệu quả. Bạn có thể kết hợp fill-opacity với các thuộc tính khác để tạo ra nhiều hiệu ứng thị giác đa dạng.
Fill-Opacity trong css là gì
Trong CSS, fill-opacity là thuộc tính điều chỉnh độ trong suốt của phần tô màu bên trong một hình dạng SVG. Giá trị của nó nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục). Thuộc tính này ảnh hưởng đến màu sắc hoặc mẫu được sử dụng để tô đầy hình dạng, không ảnh hưởng đến đường viền. Nó cho phép bạn tạo ra các hiệu ứng hình ảnh tinh tế và hấp dẫn.
Cấu trúc thuộc tính Fill-Opacity
Fill-Opacity: value;
Các giá trị của Fill-Opacity property in css
Fill-Opacity property in css là thuộc tính CSS điều khiển độ mờ của màu nền trong một hình dạng. Thuộc tính này nhận nhiều giá trị khác nhau, cho phép điều chỉnh mức độ trong suốt của màu sắc. Hiểu rõ các giá trị này giúp bạn tạo ra các hiệu ứng hình ảnh đa dạng và tinh tế.
- 0.2: Đặt độ mờ của màu nền ở mức 20%, cho phép nhìn xuyên qua phần nào.
- 20%: Tương đương với giá trị 0.2, thể hiện độ mờ là 20%.
- inherit: Kế thừa giá trị fill-opacity từ phần tử cha.
- initial: Thiết lập giá trị fill-opacity về giá trị mặc định ban đầu.
- revert: Khôi phục giá trị fill-opacity từ quy tắc kiểu được kế thừa.
- revert-layer: Khôi phục giá trị fill-opacity từ lớp kiểu được kế thừa.
- unset: Thiết lập giá trị fill-opacity về giá trị được kế thừa hoặc giá trị ban đầu.
Ví dụ về giá trị 0.2 trong Fill-Opacity
Thuộc tính Fill-Opacity trong CSS điều chỉnh độ trong suốt của màu nền. Giá trị 0.2 cho thấy màu nền sẽ rất mờ, chỉ hiện lên một phần rất nhỏ. Bạn có thể tưởng tượng như nhìn qua một lớp kính sương mù mỏng. Điều này tạo hiệu ứng nhẹ nhàng, không làm che khuất hoàn toàn nội dung bên dưới. Việc sử dụng Fill-Opacity giúp tạo ra các hiệu ứng thiết kế tinh tế và đẹp mắt.
Cấu trúc
Fill-Opacity: 0.2;
Ví dụ
```html<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
fill-opacity: 0.2; /* Giá trị fill-opacity là 0.2 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
Output
Ví dụ về giá trị 20% trong Fill-Opacity
Giá trị 20% trong thuộc tính fill-opacity của CSS điều chỉnh độ mờ của màu đổ đầy. Nó làm cho màu sắc trong suốt hơn, chỉ hiển thị 20% cường độ màu gốc. Bạn có thể tưởng tượng như một lớp màn che mỏng phủ lên hình ảnh, giảm bớt độ đậm của màu sắc. Điều này rất hữu ích khi bạn muốn tạo hiệu ứng mờ nhẹ hoặc làm nổi bật các phần khác của thiết kế. Việc sử dụng fill-opacity giúp tạo ra những hiệu ứng thị giác tinh tế và đẹp mắt.Cấu trúc
Fill-Opacity: 20%;
Ví dụ
<html>
<head>
<style>
.container {
width: 100px;
height: 100px;
background-image: url("https://tidadigi.com/images/post/css.jpg");
fill-opacity: 0.2; /* 20% fill opacity */
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Output
Ví dụ về giá trị inherit trong Fill-Opacity
Thuộc tính fill-opacity trong CSS điều khiển độ trong suốt của phần tô màu hình vẽ. Nếu bạn đặt giá trị inherit, hình vẽ sẽ kế thừa độ trong suốt từ phần tử cha của nó. Điều này giúp bạn dễ dàng quản lý độ trong suốt của nhiều hình vẽ cùng lúc một cách nhất quán. Nếu phần tử cha không có fill-opacity, nó sẽ mặc định là 1 (hoàn toàn không trong suốt). Như vậy, việc sử dụng inherit giúp tiết kiệm thời gian và code của bạn gọn gàng hơn.
Cấu trúc
Fill-Opacity: inherit;
Ví dụ
```html<html>
<head>
<style>
body {
fill-opacity: 0.5; /* Fill opacity for the body */
}
.container {
width: 200px;
height: 100px;
}
.rect1 {
fill: blue;
}
.rect2 {
fill: red;
fill-opacity: inherit; /* Inherits fill-opacity from the body */
}
.rect3 {
fill: url("https://tidadigi.com/images/post/css.jpg");
fill-opacity: inherit; /* Inherits fill-opacity from the body */
}
</style>
</head>
<body>
<svg class="container">
<rect class="rect1" width="100" height="50"/>
<rect class="rect2" x="100" y="0" width="100" height="50"/>
<rect class="rect3" x="0" y="50" width="200" height="50"/>
</svg>
</body>
</html>
```
Output
Ví dụ về giá trị initial trong Fill-Opacity
Giá trị initial của thuộc tính fill-opacity trong CSS đặt độ mờ của hình vẽ về trạng thái mặc định. Thông thường, giá trị mặc định này là 1, nghĩa là hình vẽ sẽ hoàn toàn không trong suốt. Điều này đảm bảo hình ảnh hiển thị đầy đủ, rõ nét nhất. Bạn có thể thay đổi giá trị này để tạo hiệu ứng mờ dần hoặc làm nổi bật các phần tử khác. Việc sử dụng initial giúp bạn dễ dàng khôi phục lại thiết lập ban đầu.
Cấu trúc
Fill-Opacity: initial;
Ví dụ
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
fill-opacity: initial; /* Giá trị initial của fill-opacity là 1 */
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
fill-opacity: 0.5; /* So sánh với giá trị khác initial */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
Output
Ví dụ về giá trị revert trong Fill-Opacity
Thuộc tính fill-opacity trong CSS điều chỉnh độ trong suốt của màu sắc đổ đầy hình dạng SVG. Giá trị của nó là một số thập phân từ 0 đến 1, trong đó 0 là hoàn toàn trong suốt và 1 là hoàn toàn đục. Nếu bạn không chỉ định giá trị, trình duyệt sẽ sử dụng giá trị mặc định là 1, tức là hình dạng sẽ được đổ đầy màu sắc hoàn toàn. Một giá trị âm hoặc lớn hơn 1 sẽ bị bỏ qua và mặc định là 1.
Cấu trúc
Fill-Opacity: revert;
Ví dụ
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
fill-opacity: 0.5; /* Fill-opacity của phần tử này */
}
.box-child {
width: 50px;
height: 50px;
background-color: red;
fill-opacity: revert; /* Kế thừa fill-opacity từ phần tử cha */
}
</style>
</head>
<body>
<div class="box">
<div class="box-child"></div>
</div>
</body>
</html>
Output
Ví dụ về giá trị revert-layer trong Fill-Opacity
Thuộc tính fill-opacity trong CSS điều chỉnh độ trong suốt của phần tô màu bên trong một hình dạng. Giá trị revert-layer không phải là một giá trị hợp lệ cho thuộc tính này; nó chỉ hoạt động với một số thuộc tính khác. Bạn nên sử dụng các giá trị số từ 0 (trong suốt hoàn toàn) đến 1 (đục hoàn toàn) để điều chỉnh độ trong suốt. Ví dụ, fill-opacity: 0.5 sẽ tạo ra một hình dạng bán trong suốt. Hãy nhớ rằng fill-opacity chỉ ảnh hưởng đến phần tô màu, không phải đường viền.
Cấu trúc
Fill-Opacity: revert-layer;
Ví dụ
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
display: flex;
}
.box {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
fill-opacity: revert-layer;
}
.box-image {
width: 100px;
height: 100px;
background-image: url("https://tidadigi.com/images/post/css.jpg");
fill-opacity: revert-layer;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box-image"></div>
</div>
</body>
</html>
Output
Ví dụ về giá trị unset trong Fill-Opacity
Thuộc tính fill-opacity trong CSS điều chỉnh độ trong suốt của phần tô màu hình vẽ. Giá trị unset sẽ khôi phục lại giá trị mặc định của thuộc tính này, tùy thuộc vào ngữ cảnh. Nó có thể kế thừa từ phần tử cha hoặc được đặt lại thành giá trị ban đầu của nó, tùy thuộc vào trình duyệt. Nếu không có giá trị được kế thừa hoặc mặc định, fill-opacity sẽ mặc định là 1 (hoàn toàn không trong suốt). Hiểu đơn giản, unset giúp bạn đặt lại độ trong suốt về trạng thái ban đầu.
Cấu trúc
Fill-Opacity: unset;
Ví dụ
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
fill-opacity: 0.5; /* Fill-opacity mặc định */
}
.box-unset {
fill-opacity: unset; /* Reset về giá trị kế thừa từ cha */
}
.container {
fill-opacity: 1; /* Fill-opacity của phần tử cha */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box box-unset"></div>
</div>
</body>
</html>
Output
Kết bài cho css Fill-Opacity property
Tóm lại, thuộc tính fill-opacity là công cụ tuyệt vời để điều chỉnh độ trong suốt của màu nền hay màu đổ bóng trong đồ họa vector. Bạn có thể dễ dàng tạo ra những hiệu ứng thú vị, từ những hình ảnh mờ ảo cho đến những lớp chồng chéo tinh tế. Việc sử dụng fill-opacity rất đơn giản, chỉ cần một giá trị từ 0 đến 1, giúp bạn kiểm soát độ trong suốt một cách chính xác và linh hoạt. Hãy thử nghiệm và khám phá xem bạn có thể tạo ra những tác phẩm nghệ thuật tuyệt vời như thế nào nhé!