Hướng Dẫn Và Ví Dụ CSS Opacity - Openplanning

Trang chủ » Chỉnh Opacity » Hướng Dẫn Và Ví Dụ CSS Opacity - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ CSS Opacity
  1. CSS Opacity
  2. RGBA

1. CSS Opacity

CSS Opacity được sử dụng để thiết lập độ mờ (opacity) cho một phần tử. Nó chấp nhận một giá trị số từ 0 đến 1. Một số trình duyệt cũng chấp nhận một giá trị phần trăm ( % ) tuy nhiên không phải tất cả.CSS {opacity: 1} là độ mờ mặc định của một phần tử, giá trị này cho phép bạn nhìn thấy phần tử một cách rõ ràng nhất. CSS {opacity:0} sẽ làm cho phần tử trở thành trong suốt (transparent).opacity: <alpha-value>; /* Example: */ opacity: 1.0; opacity: 0.5; opacity: 0;Độ mờ (Opacity) khi được áp dụng cho một phần tử nó sẽ có tác dụng với tất cả các nội dung của phần tử, bao gồm cả các phần tử con. Không có sự thừa kế về độ mờ, và bạn có thể thiết lập một giá trị CSS Opacity khác cho phần tử con, nhưng phần tử con vẫn bị ảnh hưởng bởi độ mờ của phần tử cha.opacity-example.css#parent { border: 1px solid blue; padding: 5px; background:lightblue; } .child { display: inline-block; background: lightgreen; padding: 5px; margin: 10px; height: 50px; width: 150px; } .option { border: 1px solid #eee; padding: 5px; margin: 10px 0px; }opacity-example.html<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="opacity-example.css" /> <script> function changeOpa(event) { var opacityValue = event.target.value; var parentElement = document.getElementById("parent"); parentElement.style.opacity = opacityValue; } </script> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Set Opacity for parent element:</p> <div class="option"> <input type="radio" name="opa" onclick="changeOpa(event)" value="1" checked/> Opacity: 1 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0.5"/> Opacity: 0.5 <br/> <input type="radio" name="opa" onclick="changeOpa(event)" value="0"/> Opacity: 0 </div> <div id="parent"> I am a parent element <br/> <div class="child"> I am a child element. <br/> {opacity: 1} </div> <div class="child" style="opacity: 0.5"> I am a child element. <br/> {opacity: 0.5} </div> <br/> ... </div> </body> </html>Ví dụ, thay đổi độ mờ cho một ảnh (Image) khi con trỏ ở trên (over) ảnh.opacity-hover-example.html<!DOCTYPE html> <html> <head> <title>CSS Opacity</title> <meta charset="UTF-8"/> <style> .my-image { margin: 5px; } .my-image:hover { opacity: 0.5; } </style> </head> <body> <h3>CSS Opacity</h3> <p style="color:blue;">Move the cursor over Image</p> <img class="my-image" src="../images/flower.png" /> </body> </html>

2. RGBA

Sử dụng hàm RGBA giúp bạn tạo ra một mầu bằng sự kết hợp của 4 giá trị Red, Green, Blue, Alpha. Trong đó Red, Green, Blue là các số nguyên (integer) nhận các giá trị từ 0-255. Alpha đại diện cho độ mờ (opacity), nó nhận giá trị từ 0-1.rgba(76, 175, 80, 0.1) rgba(76, 175, 80, 0.15) rgba(76, 175, 80, 1)Mầu được tạo ra bởi RGBA có độ mờ, bạn có thể sử dụng mầu này làm mầu nền (background color) cho một phần tử. Độ mờ này chỉ có tác dụng với nền (background) của phần tử, nó không ảnh hưởng tới nội dung của phần tử và các phần tử con.
  • Hướng dẫn và ví dụ CSS Colors
grba-example.html<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> div { padding: 5px; } </style> </head> <body> <h3>Transparent Box</h3> <p style="color:blue;">With opacity:</p> <div style="background-color: rgba(76, 175, 80); opacity:0.1;"> {opacity:0.1} </div> <div style="background-color: rgba(76, 175, 80); opacity:0.3;"> {opacity:0.3} </div> <div style="background-color: rgba(76, 175, 80);opacity:0.6;"> {opacity:0.6} </div> <div style="background-color: rgba(76, 175, 80);"> {opacity:1.0} </div> <p style="color:blue;">With RGBA color values:</p> <div style="background-color: rgba(76, 175, 80, 0.1);"> {background-color: rgba(76, 175, 80, 0.1);} </div> <div style="background-color: rgba(76, 175, 80, 0.3);"> {background-color: rgba(76, 175, 80, 0.3);} </div> <div style="background-color: rgba(76, 175, 80, 0.6);"> {background-color: rgba(76, 175, 80, 0.6);} </div> <div style="background-color: rgba(76, 175, 80);"> {background-color: rgba(76, 175, 80);} </div> </body> </html>Ví dụ, tạo một hộp gần như trong suốt chứa nội dung văn bản mô tả của một ảnh.grba-example2.html<!DOCTYPE html> <html> <head> <title>Transparent Box</title> <meta charset="UTF-8"/> <style> .img-container { display: inline-block; position: relative; } .img-desc { position: absolute; left: 5px; right: 5px; bottom: 15px; padding: 5px; text-align: center; background-color: rgba(76, 175, 80, 0.3); color: white; } </style> </head> <body> <h3>Transparent Box</h3> <div class = "img-container"> <img src="../images/image.png" width="320" height="178"/> <div class="img-desc"> This is an Image </div> </div> </body> </html>

Các hướng dẫn CSS

  • Các đơn vị tính trong CSS
  • Hướng dẫn và ví dụ CSS Selectors cơ bản
  • Hướng dẫn và ví dụ CSS Attribute Selector
  • Hướng dẫn và ví dụ CSS Selectors kết hợp
  • Hướng dẫn và ví dụ CSS Backgrounds
  • Hướng dẫn và ví dụ CSS Opacity
  • Hướng dẫn và ví dụ CSS Padding
  • Hướng dẫn và ví dụ CSS Margins
  • Hướng dẫn và ví dụ CSS Borders
  • Hướng dẫn và ví dụ CSS Outline
  • Hướng dẫn và ví dụ CSS box-sizing
  • Hướng dẫn và ví dụ CSS max-width và min-width
  • Các từ khóa min-content, max-content, fit-content, stretch trong CSS
  • Hướng dẫn và ví dụ CSS Links
  • Hướng dẫn và ví dụ CSS Fonts
  • Tìm hiểu về Generic Font Family trong CSS
  • Hướng dẫn và ví dụ CSS @font-face
  • Hướng dẫn và ví dụ CSS Align
  • Hướng dẫn và ví dụ CSS Cursors
  • Hướng dẫn và ví dụ CSS Overflow
  • Hướng dẫn và ví dụ CSS Lists
  • Hướng dẫn và ví dụ CSS Tables
  • Hướng dẫn và ví dụ CSS visibility
  • Hướng dẫn và ví dụ CSS Display
  • Hướng dẫn và ví dụ CSS Grid Layout
  • Hướng dẫn và ví dụ CSS Float và Clear
  • Hướng dẫn và ví dụ CSS Position
  • Hướng dẫn và ví dụ CSS line-height
  • Hướng dẫn và ví dụ CSS text-align
  • Hướng dẫn và ví dụ CSS text-decoration
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn ECMAScript, Javascript

Các hướng dẫn CSS

  • Các đơn vị tính trong CSS
  • Hướng dẫn và ví dụ CSS Selectors cơ bản
  • Hướng dẫn và ví dụ CSS Attribute Selector
  • Hướng dẫn và ví dụ CSS Selectors kết hợp
  • Hướng dẫn và ví dụ CSS Backgrounds
  • Hướng dẫn và ví dụ CSS Opacity
  • Hướng dẫn và ví dụ CSS Padding
  • Hướng dẫn và ví dụ CSS Margins
  • Hướng dẫn và ví dụ CSS Borders
  • Hướng dẫn và ví dụ CSS Outline
  • Hướng dẫn và ví dụ CSS box-sizing
  • Hướng dẫn và ví dụ CSS max-width và min-width
  • Các từ khóa min-content, max-content, fit-content, stretch trong CSS
  • Hướng dẫn và ví dụ CSS Links
  • Hướng dẫn và ví dụ CSS Fonts
  • Tìm hiểu về Generic Font Family trong CSS
  • Hướng dẫn và ví dụ CSS @font-face
  • Hướng dẫn và ví dụ CSS Align
  • Hướng dẫn và ví dụ CSS Cursors
  • Hướng dẫn và ví dụ CSS Overflow
  • Hướng dẫn và ví dụ CSS Lists
  • Hướng dẫn và ví dụ CSS Tables
  • Hướng dẫn và ví dụ CSS visibility
  • Hướng dẫn và ví dụ CSS Display
  • Hướng dẫn và ví dụ CSS Grid Layout
  • Hướng dẫn và ví dụ CSS Float và Clear
  • Hướng dẫn và ví dụ CSS Position
  • Hướng dẫn và ví dụ CSS line-height
  • Hướng dẫn và ví dụ CSS text-align
  • Hướng dẫn và ví dụ CSS text-decoration
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn ECMAScript, Javascript

Các bài viết mới nhất

  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Radio
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Hướng dẫn và ví dụ Flutter SharedPreferences
  • Tạo Module trong Flutter
  • Flutter upload ảnh sử dụng http và ImagePicker
  • Bài thực hành Dart http CRUD
  • Hướng dẫn và ví dụ Flutter image_picker
  • Flutter GridView với SliverGridDelegate tuỳ biến
Show More
  • Các hướng dẫn CSS

Từ khóa » Chỉnh Opacity