Hướng dẫn về CSS Color trong suốt. Ở đây chúng tôi thảo luận về phần giới thiệu, Màu trong suốt hoạt động như thế nào trong CSS, Cú pháp và các Ví dụ.

Bạn đang xem : mã css màu trong suốt

CSS Màu trong suốt

Giới thiệu về CSS Color trong suốt

Màu trong suốt trong CSS làm cho các phần tử nền có thể nhìn thấy từ một phần tử trên cùng khác của trang. Màu trong suốt có thể được áp dụng với thuộc tính màu nền và màu sắc. Nếu chúng ta lấy màu nền làm trong suốt thì nó làm cho các phần tử phía sau của nền hoàn toàn có thể nhìn thấy được. Nhưng trong thời gian thực, chúng tôi không muốn rằng chúng tôi cần màu nửa trong suốt. Tính năng bán trong suốt có thể đạt được thông qua giá trị rgba với màu nền và thuộc tính màu.

Sử dụng trong thời gian thực: Nếu khách hàng muốn màu nền trang hoặc màu văn bản của họ sáng hơn màu thực tế hoặc nếu họ muốn nhìn mọi thứ từ phía trên phần tử thì chúng tôi đã sử dụng nền trong suốt màu sắc và thuộc tính màu với giá trị rgba.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Màu trong suốt hoạt động như thế nào trong CSS?

Như chúng ta đã thảo luận, màu trong suốt có thể được áp dụng với màu nền và các thuộc tính của màu.

Dưới đây là các cú pháp nhất định,

Cú pháp 1:

  div
{
background-color: trong suốt;
}  

Màu nền có giá trị trong suốt làm cho màu nền hoàn toàn trong suốt (trở nên biến mất)

Cú pháp 2:

  div
{
background-color: rgba (value1, value2, value3, value4);
}  
  • Giá trị 1: Cung cấp màu đỏ từ 0 đến 255 hoặc 0 đến 100%
  • Giá trị 2: Cung cấp màu xanh lục từ 0 đến 255 hoặc 0 đến 100%
  • Giá trị 3: Cung cấp màu xanh lam từ 0 đến 255 hoặc 0 đến 100%
  • Value4 : Đây là thông số alpha cho độ trong suốt từ 0 đến 1. 0 có nghĩa là hoàn toàn trong suốt và 1 có nghĩa là hoàn toàn không trong suốt.

Chúng tôi có thể đặt màu nền thành các màu đỏ, xanh lục và xanh lam với khả năng hiển thị theo tỷ lệ phần trăm bắt buộc.

Cú pháp 3:

  div
{
màu sắc: trong suốt;
}  

Màu của văn bản có giá trị trong suốt làm cho màu hoàn toàn trong suốt (trở nên biến mất).

Cú pháp 4:

  div
{
color: rgba (value1, value2, value3, value4);
}  

Chúng tôi có thể đặt màu của văn bản thành các màu đỏ, lục và lam với khả năng hiển thị theo tỷ lệ phần trăm bắt buộc.

Ví dụ về CSS Color trong suốt

Dưới đây là các ví dụ cho CSS:

Ví dụ # 1

Màu nền và màu có giá trị trong suốt:

Mã HTML:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "ISO-8859-1" & gt;
& lt; link rel = "stylesheet" href = "BackgroundColorAndColorTransparent.css" & gt;
& lt; title & gt; Màu Trong suốt & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; font color = "green" style = "" & gt; & lt; h2 & gt; Màu nền và màu
thuộc tính có giá trị minh bạch & lt; / h2 & gt; & lt; / font & gt;
& lt; div class = "topBColor" & gt; Xin chào, tôi đang sử dụng màu nền & lt; / div & gt;
& lt; div class = "tBColor" & gt; Xin chào, tôi sử dụng màu nền và
giá trị minh bạch & lt; / div & gt;
& lt; div class = "topColor" & gt; Xin chào, tôi sử dụng màu văn bản & lt; / div & gt;
& lt; div class = "tColor" & gt; Xin chào, tôi thích màu văn bản và giá trị trong suốt & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Mã CSS:

 . topBColor {
font-size: 30px;
chiều rộng: 500px;
background-color: blue;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.tBColor {
font-size: 30px;
chiều rộng: 500px;
background-color: trong suốt;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.topColor {
font-size: 30px;
chiều rộng: 500px;
màu nâu;
lề: 10px;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.tColor {
font-size: 30px;
chiều rộng: 500px;
màu sắc: trong suốt;
lề: 10px;
lề: 10px;
đường viền: 10px đôi màu nâu;
}  

Đầu ra trước khi trong suốt:

Xem Thêm  JavaScript: Toán tử logic - và câu lệnh trong javascript

Màu CSS trong suốt -example 1

Đầu ra sau khi trong suốt:

CSS Color transparent -example 1.1

Giải thích:

Trong đoạn mã trên, đoạn đầu tiên và đoạn thứ 3 lấy thuộc tính nền và màu tương ứng được lấy không trong suốt. Vì vậy, ở đầu ra cuối cùng, không thể thay đổi đầu ra của 2 đoạn văn này.

Trong khi màu nền và màu của đoạn văn thứ 2 và đoạn cuối có độ trong suốt tương ứng. Vì vậy, trong đầu ra cuối cùng, đầu ra 2 đoạn văn này đã thay đổi. Vì thuộc tính trong suốt cho độ trong suốt 100% nên màu nền trong đoạn văn thứ 2 và văn bản trong đoạn văn cuối cùng sẽ biến mất.

Ví dụ # 2

Màu nền và màu với các giá trị rgba:

Mã HTML:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "ISO-8859-1" & gt;
& lt; link rel = "stylesheet" href = "BackgroundColorAndColorRGBA.css" & gt;
& lt; title & gt; Màu Trong suốt & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; font color = "brown" style = "" & gt; & lt; h2 & gt; Màu nền và màu
thuộc tính có giá trị RGBA & lt; / h2 & gt; & lt; / font & gt;
& lt; div class = "redB" & gt; Xin chào, TÔI ĐỎ với màu nền trong suốt & lt; / div & gt;
& lt; div class = "redBCR" & gt; Xin chào, TÔI ĐỎ với màu nền trong suốt theo màu RGBA & lt; / div & gt;
& lt; div class = "redC" & gt; Xin chào, TÔI ĐỎ không có màu văn bản trong suốt & lt; / div & gt;
& lt; div class = "redRC" & gt; Xin chào, tôi sử dụng màu văn bản trong suốt theo giá trị RGBA & lt; / div & gt;
& lt; div class = "greenB" & gt; Xin chào, tôi là màu XANH với màu nền trong suốt & lt; / div & gt;
& lt; div class = "greenBCR" & gt; Xin chào, Tôi có màu XANH với màu nền trong suốt theo màu RGBA & lt; / div & gt;
& lt; div class = "greenC" & gt; Xin chào, Tôi là màu XANH với màu văn bản trong suốt theo giá trị RGBA & lt; / div & gt;
& lt; div class = "greenRC" & gt; Xin chào, tôi có màu XANH LÁ với màu tex trong suốt theo giá trị RGBA & lt; / div & gt;
& lt; div class = "blueB" & gt; Xin chào, tôi là màu XANH với màu nền trong suốt & lt; / div & gt;
& lt; div class = "blueBCR" & gt; Xin chào, Tôi có màu XANH với màu nền trong suốt theo màu RGBA & lt; / div & gt;
& lt; div class = "blueC" & gt; Xin chào! Tôi là màu XANH với màu văn bản trong suốt theo giá trị RGBA & lt; / div & gt;
& lt; div class = "blueRC" & gt; Xin chào, Tôi có màu XANH LÁ với màu tex trong suốt theo giá trị RGBA & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Mã CSS:

 . redB {
font-size: 30px;
chiều rộng: 500px;
background-color: đỏ;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.redBCR {
font-size: 30px;
chiều rộng: 500px;
background-color: rgba (255,0,0,0.4);
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.redC {
font-size: 30px;
chiều rộng: 500px;
màu đỏ;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.redRC {
font-size: 30px;
chiều rộng: 500px;
màu: rgba (255,0,0,0.4) ;;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.greenB {
font-size: 30px;
chiều rộng: 500px;
background-color: xanh lá cây;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.greenBCR {
font-size: 30px;
chiều rộng: 500px;
background-color: rgba (0,255,0,0.4) ;;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.greenC {
font-size: 30px;
chiều rộng: 500px;
màu xanh lá cây;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.greenRC {
font-size: 30px;
chiều rộng: 500px;
màu: rgba (0,255,0,0.4) ;;
đường viền: 10px đôi màu nâu;
}
.blueB {
font-size: 30px;
chiều rộng: 500px;
background-color: blue;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.blueBCR {
font-size: 30px;
chiều rộng: 500px;
màu nền: rgba (0,0,255,0.4);
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.blueC {
font-size: 30px;
chiều rộng: 500px;
màu nâu;
lề: 10px;
đường viền: 10px đôi màu nâu;
}
.blueRC {
font-size: 30px;
chiều rộng: 500px;
màu: rgba (0,0,255,0.4) ;;
lề: 10px;
đường viền: 10px đôi màu nâu;
}  

Đầu ra:

Xem Thêm  Giải mã URL - 3a 2f 2f html

Màu CSS trong suốt -example 2

Ví dụ 2.1

Giải thích:

Trong ví dụ trên, màu nền không có giá trị thuộc tính rgba và màu nền có giá trị thuộc tính rgba. Trong ví dụ trên, màu văn bản không có giá trị thuộc tính rgba và màu văn bản có giá trị thuộc tính rgba. Kết quả ở trên phân biệt rõ ràng điều gì sẽ xảy ra nếu chúng ta áp dụng giá trị rgba cho màu nền và màu. rgba thay đổi màu trong khoảng từ 0 đến 1 giá trị. 0 có nghĩa là hoàn toàn trong suốt và 1 có nghĩa là hoàn toàn không trong suốt.

Ví dụ # 3

Màu nền có giá trị trong suốt làm cho hình nền hiển thị:

Mã HTML:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "ISO-8859-1" & gt;
& lt; link rel = "stylesheet" href = "BackgroundImageWithRGBA.css" & gt;
& lt; title & gt; Màu Trong suốt & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div & gt;
& lt; h1 & gt; Đầu tiên & lt; / h1 & gt;
& lt; / div & gt;
& lt; div class = "second" & gt;
& lt; h1 & gt; Thứ hai & lt; / h1 & gt;
& lt; / div & gt;
& lt; / body & gt;  

Mã CSS:

  body {
background: url ("m1.jpg") aqua;
}
div {
nền-màu: xám;
border: 10px solid maroon;
đệm: 40px;
lề: 40px;
}
.thứ hai {
background-color: trong suốt;
}  

Đầu ra:

Ví dụ 3

Giải thích:

Trong đoạn mã trên, Tiêu đề đầu tiên được sử dụng mà không trong suốt nên phần nền không hiển thị, nhưng tiêu đề Thứ hai được sử dụng trong suốt, do đó, phần hình nền hoàn toàn có thể nhìn thấy (trong suốt cho độ trong suốt 100%).

Kết luận

Màu trong suốt có thể được áp dụng với màu nền và thuộc tính màu, đồng thời màu trong suốt cũng có thể đạt được bằng giá trị thuộc tính rgba.

Các bài báo được đề xuất

Đây là hướng dẫn về CSS Color trong suốt. Ở đây chúng ta thảo luận về phần giới thiệu, cách hoạt động của Màu trong suốt trong CSS, Cú pháp và Ví dụ với kết quả đầu ra. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

Xem Thêm  Hàm date_format () trong PHP - định dạng ngày hiển thị php

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề mã css màu trong suốt

Are You Making This Mistake With CSS Colors?

alt

  • Tác giả: Web Dev Simplified
  • Ngày đăng: 2021-07-10
  • Đánh giá: 4 ⭐ ( 4509 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
    Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today

    Every developer needs to define colors in CSS at some point and generally when a developer defines colors in CSS they use RGB or HEX to write out those colors. Technically there is nothing wrong with doing this, but it is far from the best way to write colors in CSS. This is where HSL shines. It is incredibly intuitive, easy to read, and best of all is perfect for working with CSS variables. Once I started using HSL I couldn’t go back to using RGB or HEX. In this video I will show you why.

    📚 Materials/References:

    FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
    Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today
    CSS Variables Video: https://youtu.be/oZPR_78wCnY
    CSS Variables Article: https://blog.webdevsimplified.com/2020-02/css-custom-properties
    HSL Article: https://blog.webdevsimplified.com/2021-06/hsl-color-format

    🌎 Find Me Here:

    My Blog: https://blog.webdevsimplified.com
    My Courses: https://courses.webdevsimplified.com
    Patreon: https://www.patreon.com/WebDevSimplified
    Twitter: https://twitter.com/DevSimplified
    Discord: https://discord.gg/7StTjnR
    GitHub: https://github.com/WebDevSimplified
    CodePen: https://codepen.io/WebDevSimplified

    ⏱️ Timestamps:

    00:00 – Introduction
    00:20 – Why not using HSL is bad
    01:50 – What is HSL?
    03:00 – Visual examples of Hue, Saturation, and Lightness
    04:40 – Pros of HSL

    CSS WDS HSL

TOP 5 mã màu trong suốt trong CSS chi tiết nhất

  • Tác giả: mekoong.vn
  • Đánh giá: 3 ⭐ ( 8946 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: TOP 5 mã màu trong suốt trong CSS chi tiết nhất Mục lục Các bạn có biết, một trong những điều quan trọng nhất trong thiết kế đó chính là mã màu.  Do đó, mã màu trong suốt trong CSS là một trong những

Các cách khai báo màu sắc trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 2566 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Mã Màu Trong Suốt Css Chi Tiết Nhất, Top 5 Mã Màu Trong Suốt Trong Css Chi Tiết Nhất

  • Tác giả: giasuviet.edu.vn
  • Đánh giá: 5 ⭐ ( 3039 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những điều quan trọng trong thiết kế đó chính là mã màu, Vì vậy mã màu trong suốt css là một yếu tố để chúng ta có thể thuận tiện khi thiết kế

Color transparence

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 7032 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Color transparence là thuộc tính có trong CSS3, cho phép tạo color hay background-color trong suốt theo hệ màu rgba.

Tổng hợp mã màu trong suốt css mới nhất 2020

  • Tác giả: cachthietkeweb.vn
  • Đánh giá: 3 ⭐ ( 3532 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những điều quan trọng trong thiết kế đó chính là mã màu. Vì vậy mã màu trong suốt css là một yếu tố để chúng ta có thể thuận tiện khi thiết kế.

Màu nền CSS trong suốt

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3218 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] bây giờ bạn có thể sử dụng rgba trong các thuộc tính CSS như sau: .class…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php