Tính minh bạch đóng một vai trò quan trọng trong việc phát triển giao diện người dùng. Nó cho phép bạn chọn mức độ trong suốt của các phần tử trên các trang web của bạn. Bạn có thể điều chỉnh độ trong suốt theo một số cách – vì tất nhiên, trong CSS, có nhiều cách để làm điều tương tự. Thuộc tính độ mờ trong CSS là

Bạn đang xem: mã html cho màu nền trong suốt

Tính trong suốt đóng một vai trò quan trọng trong việc phát triển giao diện người dùng. Nó cho phép bạn chọn mức độ trong suốt của các phần tử trên trang web của bạn.

Bạn có thể điều chỉnh độ trong suốt theo một số cách – vì tất nhiên, trong CSS, có nhiều cách để làm điều tương tự.

Thuộc tính CSS opacity là cách đầu tiên bạn nghĩ đến để thay đổi độ trong suốt. Nhưng thuộc tính này không phải lúc nào cũng có thể giải cứu được, đặc biệt là khi có hình nền với văn bản mà bạn muốn làm trong suốt.

Vì vậy, trong bài viết này, tôi sẽ chỉ cho bạn các cách khác nhau mà bạn có thể điều chỉnh tính minh bạch để bạn có thể bắt đầu triển khai nó trong các dự án mã hóa của mình.

Độ trong suốt của Hình ảnh với Thuộc tính Độ mờ CSS

Để làm cho hình ảnh trong suốt, bạn có thể sử dụng thuộc tính CSS opacity , như tôi đã đề cập ở trên. Cú pháp cơ bản của thuộc tính opacity được hiển thị trong đoạn mã bên dưới:

  bộ chọn {
          opacity: giá trị;
      }
 

Thuộc tính opacity nhận các giá trị từ 0.0 đến 1.0 , với 1 là giá trị mặc định cho tất cả các phần tử. Giá trị càng thấp, càng minh bạch. Vì vậy, nếu một phần tử có độ mờ 0 , thì nó sẽ ẩn.

Bạn có thể tìm thấy các ví dụ về các giá trị độ mờ khác nhau trong các đoạn mã bên dưới:

  & lt; img src = "freecodecamp.png" alt = "freecodecamp-logo" / & gt;
 

Tôi đã thêm một số CSS để căn giữa mọi thứ trên trang:

  body {
        hiển thị: flex;
        align-các mục: trung tâm;
        justify-content: trung tâm;
        margin: 0 auto;
        chiều cao: 100vh;
      }


 img {
        độ mờ: 1;
      }
 

Giá trị độ mờ của 1 là giá trị mặc định, vì vậy hình ảnh xuất hiện như sau:
default-opacity

  img {
     độ mờ: 0,5;
   }
 

Mã này cung cấp cho chúng tôi độ mờ 50% và bạn có thể thấy rằng biểu trưng đã mờ đi một chút:

Xem Thêm  Học lập trình trực tuyến - test case cho form đăng ký

half-opacity

  img {
        độ mờ: 0;
      }
 

Với độ mờ 0 , hình ảnh trong suốt 100% nên không nhìn thấy được:

zero-opacity

Cách duy nhất để đảm bảo hình ảnh có trên trang là kiểm tra hình ảnh đó bằng công cụ phát triển trình duyệt của bạn:

image-in-devtools

Bạn có thể sử dụng giá trị độ mờ này để làm nhiều việc – ví dụ: bạn có thể sử dụng giá trị này để đưa văn bản lên hình ảnh anh hùng trên trang web.

Bạn có thể tự hỏi tại sao muốn ẩn nội dung với giá trị độ mờ bằng 0. Chà, nó có thể hữu ích trong hoạt ảnh và cả trong việc xây dựng trò chơi HTM + CSS + JavaScript.

Bạn chắc chắn sẽ muốn sử dụng định vị CSS để giúp bạn sắp xếp mọi thứ. Tôi sẽ thảo luận vấn đề này trong các phần tiếp theo của bài viết.

Độ trong suốt của Hình nền trong HTML và CSS

CSS cung cấp một cách để đặt hình nền cho phần tử vùng chứa có thuộc tính background-image , vì vậy bạn không nhất thiết phải thực hiện với CSS. Điều này có nghĩa là bạn cũng có thể đặt văn bản vào vùng chứa.

  & lt; div class = "showcase" & gt;
      & lt; h1 & gt; Một bầy vượn cáo đuôi chuông & lt; / h1 & gt;
& lt; / div & gt;
 
  body {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      margin: 0 auto;
      chiều cao: 100vh;
    }
    .showcase {
      background-image: url ("ring-tailed-lemurs.jpeg");
      chiều cao: 400px;
      chiều rộng: 500px;
      background-position: trung tâm;
      background-repeat: không lặp lại;
      background-size: bìa;
      độ mờ: 0,6;
    }
 

Nhược điểm của phương pháp này là độ mờ được đặt cho vùng chứa chứa hình ảnh và văn bản. Vì vậy, độ mờ cũng ảnh hưởng đến văn bản, không chỉ hình ảnh. Đây có lẽ không phải là điều bạn muốn!

css-opacity

Giải pháp

Theo mặc định, khi bạn áp dụng độ mờ cho vùng chứa, các phần tử con cũng kế thừa nó.

Một cách giải quyết trong trường hợp này là đặt hình nền trong HTML. Điều này giúp bạn dễ dàng chỉ áp dụng độ mờ cho hình ảnh, thay vì đặt hình nền cho vùng chứa trong CSS.

Lần này, hình ảnh và văn bản sẽ được tách biệt, vì vậy văn bản sẽ không kế thừa giá trị được đặt cho opacity .

Điều này có nghĩa là bạn cũng phải sử dụng định vị CSS để căn chỉnh văn bản trong hình ảnh.

  & lt; div class = "showcase" & gt;
   & lt; img src = "ring-tailed-lemurs.jpeg" alt = "vượn cáo" class = "bg-image" / & gt;

   & lt; h1 class = "bg-img-title" & gt; Một nhóm vượn cáo đuôi chuông & lt; / h1 & gt;
& lt; / div & gt;
 
  body {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      margin: 0 auto;
      chiều cao: 100vh;
    }
    .showcase {
      chức vụ: thân nhân;
    }

    .bg-image {
      độ mờ: 0,7;
    }

    .bg-img-title {
      vị trí: tuyệt đối;
      đầu trang: 420px;
      trái: 20px;
    }
 

Trong đoạn mã CSS ở trên, tôi sử dụng flexbox để căn giữa mọi thứ trên trang.

Xem Thêm  : Phần tử Hàng trong Bảng - HTML: Ngôn ngữ Đánh dấu Siêu văn bản - làm thế nào để làm một tr

Phần tử div vùng chứa có lớp showcase được định vị tương đối , vì vậy bạn có thể định vị h1 văn bản tuyệt đối bên trong nó. Thao tác này sẽ đẩy văn bản h1 lên góc trên cùng bên trái của hình ảnh. Sau đó, các thuộc tính top left được sử dụng để đẩy văn bản xuống góc dưới cùng bên trái của hình ảnh.

Nếu bạn đang thắc mắc thuộc tính top left là gì, chúng là những thuộc tính bạn có quyền truy cập khi sử dụng thuộc tính display.

Ngoài hai thuộc tính này, bạn cũng có quyền truy cập vào các thuộc tính right bottom . Chúng cho phép bạn định vị một phần tử ở bất kỳ đâu.

Cuối cùng, hình ảnh bị mờ và văn bản không bị ảnh hưởng:
right-opacity

Kết luận

Trong bài viết này, bạn đã học cách sử dụng thuộc tính opacity của CSS để làm cho hình ảnh trong suốt.

Vì CSS vẫn phức tạp và hơi kỳ lạ, nên việc kết hợp thuộc tính opacity với các tính năng CSS khác, chẳng hạn như định vị để sử dụng đúng cách sẽ rất hữu ích.

Ngoài định vị CSS, bạn cũng có thể sử dụng thuộc tính opacity với các phần tử giả CSS như :: before :: after , đó là một cách hoạt động khó hiểu.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


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

Javascript Tutorial: Change Background Color of Selected HTML Table Row

alt

  • Tác giả: SouthBridge
  • Ngày đăng: 2021-10-22
  • Đánh giá: 4 ⭐ ( 3463 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video you’ll learn how to change Background color of selected HTML Table Row using javascript.
Xem Thêm  Gửi sự kiện trong jQuery - jquery trước khi gửi sự kiện

Thuộc tính color, màu trong HTML

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 1422 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thuoc tinh color trong html, Thuộc tính color, màu trong HTML

Thiết lập màu nền (background) trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 5768 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền (background) trong HTML của trang web mặc định là màu trắng. Bạn không thích màu này và muốn thiết lập một màu nền khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để cài đặt nền cho trang web của bạn

Html — Mã Màu Trong Suốt Trong Css Là Gì? Html — Mã Màu Cho Độ Trong Suốt Trong Css Là Gì

  • Tác giả: vanphongphamsg.vn
  • Đánh giá: 3 ⭐ ( 9064 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ế

Thiết lập background trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6775 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập background trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Thiết lập màu nền trong HTML

  • Tác giả: tusach.thuvienkhoahoc.com
  • Đánh giá: 5 ⭐ ( 8645 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thiết lập màu nền cho website trong HTML, bạn chỉ cần thay đổi thành tố phần “body” (thân) của thẻ

    . Các bước hướng dẫn sẽ thay

Màu Chữ Và Màu Nền Trong Css

  • Tác giả: jdomain.vn
  • Đánh giá: 3 ⭐ ( 6832 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu một thuộc tính khá quan trọng và được sử dụng khá phổ biến trong website đó là màu chữ và màu nền, Vậy chúng ta phải làm thế nào để kiểm soát và sử dụng nó cho phù hợp? Bài này sẽ giúp bạn trả lời câu hỏi đó

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