Thuộc Tính Opacity | CSS3 | Học Web Chuẩn

Trang chủ » Trong Suốt Html » Thuộc Tính Opacity | CSS3 | Học Web Chuẩn

Có thể bạn quan tâm

Thuộc tính opacity
  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • Thuộc tính opacity

Định nghĩa và sử dụng

Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần.

Cấu trúc

tag { opacity: giá trị; }

opacity có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
opacity giá trị opacity: 0.3; Độ trong suốt của thành phần phụ thuộc vào giá trị.
inherit opacity: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html> <head></head> <body> <div class="opaPr" <p class="below">Thành phần dưới</p> <p class="above">Thành phần trên</p> </div> </body> </html>

CSS viết:

div.opaPr { position: relative; } p.below { background: #ccff00; height: 100px; width: 100px; } p.above { background: #cc0000; height: 100px; position: absolute; top: 50px; left: 50px; width: 100px; }

Hiển thị trình duyệt khi chưa có opacity:

Thành phần dưới

Thành phần trên

Thêm thuộc tính opacity vào trong "thành phần trên":

div.opaPr { position: relative; } p.below { background: #ccff00; height: 100px; width: 100px; } p.above { background: #cc0000; height: 100px; position: absolute; top: 50px; left: 50px; width: 100px; opacity: 0.6; }

Hiển thị trình duyệt khi có opacity:

Thành phần dưới

Thành phần trên

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính opacity hỗ trợ trong đa số các trình duyệt.

Đối với trình duyệt IE8 trở xuống, phải sử dụng thuộc tính filter: filter:Alpha(opacity=60).

Link liên quan

  • HTML/XHTML
  • CSS
  • class
  • <html></html>
  • <head></head>
  • <body></body>
  • <p></p>

nav

perspective

CSS

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Thuộc tính CSS3

  • animation
  • appearance
  • backface-visibility
  • background-clip
  • background-origin
  • background-size
  • background gradient
  • Nhiều background
  • border-image
  • border-radius
  • box-align
  • box-direction
  • box-flex
  • box-ordinal-group
  • box-orient
  • box-pack
  • box-sizing
  • box-shadow
  • column
  • @font-face
  • font-size-adjust
  • @keyframes
  • nav
  • opacity
  • perspective
  • perspective-origin
  • resize
  • text-justify
  • text-overflow
  • text-shadow
  • transform
  • transform-origin
  • transform-style
  • transition
  • word-break
  • word-wrap

Thuộc tính CSS3 chưa được hỗ trợ bởi trình duyệt

  • grid-columns
  • grid-rows
  • hanging-punctuation
  • icon
  • punctuation-trim
  • rotation
  • target
  • text-outline
  • text-wrap

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Trong Suốt Html