Nền trong suốt – Độ mờ của hình ảnh trong CSS và HTML – độ mờ ảnh nền html css

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ờ của hình ảnh nền html css

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 trang web của bạn.

Bạn có thể điều chỉnh độ trong suốt theo nhiều 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ì phần tử đó 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  Cách thay đổi văn bản và màu nền trong CSS - cách thay đổi màu văn bản trong css

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 để chắc chắn rằng 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 bạn muốn ẩn nội dung với giá trị độ mờ là 0. Chà, nó có thể hữu ích trong hoạt ảnh và cả trong việc xây dựng các 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  Thuộc tính họ phông chữ CSS - phông chữ css family raleway

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 mà 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 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ờ ảnh nền html css

HTML & CSS – center text | background color | text color | add image + More

alt

  • Tác giả: The Wheelchair Guy
  • Ngày đăng: 2022-01-12
  • Đánh giá: 4 ⭐ ( 9254 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: in this video, you will learn HTML and CSS essentials. After watching this video, you will learn, How to center text, how to change the background color, how to change text color, How to add an image, how to change the font, how to resize the font, and how to get rid of bullet points.
    In this video
    0:00 Centering Text
    1:01 How to Change Background-color
    1:29 How to change the text color
    1:54 How to add an image
    2:29 How to Resize the Image
    4:36 How to Change the font family
    5:44 How to Change font-size
    6:33 the default size font
    7:19 How to Get Rid of Bullet Points

    html css webDesign

Làm Mờ Background Css > Vielhuber David, Tạo Khung Trong Suốt & Mờ Bằng Css

  • Tác giả: final-blade.com
  • Đánh giá: 3 ⭐ ( 1271 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

ĐỘ MỜ VÀ ĐỘ TRONG SUỐT CỦA HÌNH ẢNH CSS

  • Tác giả: vi.ichlese.at
  • Đánh giá: 4 ⭐ ( 4771 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ giới thiệu cho bạn khái niệm giúp bạn hiểu về độ mờ đục trong CSS và cho bạn biết cách kiểm soát tham số này.

Hướng dẫn làm tối ảnh bằng CSS

  • Tác giả: kynguyencongnghe.com
  • Đánh giá: 4 ⭐ ( 5633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn làm tối ảnh bằng CSS đơn giản. Khi upload ảnh lên Web và muốn làm tối ảnh đi thì chúng ta có thể hoàn toàn làm được bằng CSS.

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

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 5328 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.

Hiệu ứng kính mờ hơi sương – WebFaver

  • Tác giả: webfaver.com
  • Đánh giá: 4 ⭐ ( 7200 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Với hiệu ứng kính mờ, người đọc sẽ tập trung vào nội dung, mà vẫn có thể nắm được ý minh họa ở dưới hình nền. Mình sẽ hướng dẫn các bạn tạo hiệu ứng với CSS

Tôi có thể đặt hình nền và độ mờ trong cùng một thuộc tính không?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Hai phương pháp: Chuyển đổi sang PNG và làm cho hình ảnh gốc mờ đục 0,2…

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  Cách thêm Tiêu đề vào Matplotlib: Tiêu đề, Phụ đề, Tiêu đề trục • datagy - matplotlib thêm tiêu đề cốt truyện