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 : độ trong suốt của màu nền css

CSS Color Transparent

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  Cách tạo bảng trong SQL - cách tạo bảng

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  Cách căn giữa văn bản theo chiều dọc với CSS - căn giữa văn bản css

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%).

Xem Thêm  Các hàm gọi lại JavaScript Đồng bộ và Không đồng bộ - ví dụ về hàm gọi lại javascript

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 –

0

Chia sẻ

Chia sẻ


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

Simple CSS Color Overlay For Background Images

alt

  • Tác giả: iEatWebsites
  • Ngày đăng: 2017-12-28
  • Đánh giá: 4 ⭐ ( 5849 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video will show you how to create a simple color overlay using only HTML and CSS.

    Code used for this video: https://codepen.io/ieatwebsites/pen/wpJmXo

    How to use FlexBox: https://www.youtube.com/watch?v=KBskWVgUrFk

    Music by: Nicolai Heidlas Music – Chase Your Dreams
    https://soundcloud.com/nicolai-heidlas

Thuộc tính background trong CSS (CSS background)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 2756 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền trong CSS (Background-color), Hình nền trong CSS, Hình nền cố định, Viết tắt thuộc tính của background

Cách áp dụng CSS cho thẻ image, ảnh nền

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 1447 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học cách áp dụng CSS cho thẻ image, ảnh nền đảm bảo đơn giản, dễ thực hiện. Hãy tham khảo ngay bài viết dưới đây, FUNiX sẽ hướng dẫn chi tiết cho bạn!

Thuộc tính opacity

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 1340 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần, opacity là thuộc tính trong CSS3.

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á: 3 ⭐ ( 4472 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 sắc có hiệu ứng trong suốt rgba, hsla CSS3

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 2340 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo ra màu sắc có hiệu ứng trong suốt bằng CSS3 với các loại màu rgba và hsla, thêm kênh alpha vào màu

Màu nền CSS trong suốt

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4049 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