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: thêm độ trong suốt vào hình nền css

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  36 hiệu ứng di chuột qua CSS hàng đầu nên thử vào năm 2022 - hiệu ứng di chuột css chuyển đổi

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.

Xem Thêm  Các cách viết mã PHP khác nhau - làm thế nào để viết mã trong php

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.

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ủ đề thêm độ trong suốt vào css hình nền

How to Hide Any Element on WordPress Website with CSS

alt

  • Tác giả: The Wheelchair Guy
  • Ngày đăng: 2021-01-26
  • Đánh giá: 4 ⭐ ( 2156 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: in this video, I will show you how to hide any element on a WordPress website. Remove proudly powered by WordPress using CSS
    wordpress.com

    blog wordpress design

Làm Nền Ảnh Trong Suốt Trong Word, Resize Ảnh Bằng Word, Excel

  • Tác giả: muare60s.vn
  • Đánh giá: 4 ⭐ ( 7981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Word cho Microsoft 365 Word cho Microsoft 365 dành cho máy Mac Word cho web Word 2021 Word 2021 for Mac Word 2019 Word 2019 for Mac Word 2016 Word 2016 for Mac Word 2013 Word 2010 Word for Mac 2011 Xem thêm,

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

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 8806 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!

Cách để Thiết lập màu nền trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 2942 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Thiết lập màu nền trong HTML

Cách sử dụng thuộc tính trong suốt css 3, thuộc tính opacity/transparency trong css

  • Tác giả: jdomain.vn
  • Đánh giá: 3 ⭐ ( 1299 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng trong suốt khi di chuột (Transparent Hover Effect)Văn bản ở trong hộp trong suốt (Text in Transparent Box)Độ trong suốt của hình ảnh (Transparent Image)Thuộc tính opacity có thể được thiết lập giá trị từ 0, 0 – 1

Bài 28: Thuộc tính Opacity / Transparency trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 5730 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thộc tính opacity có tác dụng chỉ định độ trong suốt, mờ đục trong css

Độ mờ / Độ trong suốt của Hình ảnh CSS

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 1581 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

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

Xem Thêm  Bài 4: Các phép toán, toán tử trong C - toán tử điều kiện

By ads_php