Cách thay đổi độ mờ của ảnh nền CSS – độ mờ của ảnh nền css

Khám phá hai cách tiếp cận để thay đổi độ mờ của hình ảnh trong nền bằng CSS.

Bạn đang xem : độ mờ của hình nền css

Giới thiệu

opacity là một thuộc tính CSS cho phép bạn thay đổi độ mờ đục của một phần tử. Theo mặc định, tất cả các phần tử có giá trị là 1 . Bằng cách thay đổi giá trị này gần với 0 , phần tử sẽ xuất hiện ngày càng minh bạch hơn.

Một trường hợp sử dụng phổ biến là sử dụng hình ảnh như một phần của nền. Điều chỉnh độ mờ có thể cải thiện tính dễ đọc của văn bản hoặc đạt được giao diện mong muốn. Tuy nhiên, không có cách nào để nhắm mục tiêu background-image của một phần tử có opacity mà không ảnh hưởng đến các phần tử con.

Trong bài viết này, bạn sẽ được trình bày hai phương pháp để khắc phục hạn chế này đối với hình nền có độ mờ.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi bài viết này, bạn sẽ cần:

Phương pháp 1 – Sử dụng Định vị và Phần tử Hình ảnh Riêng biệt

Cách tiếp cận đầu tiên sẽ dựa trên hai yếu tố. Một là “bọc” cung cấp một điểm tham chiếu với position: relative . Phần tử thứ hai là phần tử img xuất hiện phía sau nội dung với vị trí: tuyệt đối và ngữ cảnh xếp chồng.

Dưới đây là một ví dụ về đánh dấu cho phương pháp này:

  

& lt;

div

class

=

"

demo-wrap

"

& gt;

& lt;

img

class

=

"

demo-bg

"

src

=

"

https://assets.digitalocean.com/labs/images/community_bg.png

"

alt

=

"

"

& gt;

& lt;

div

class

=

"

demo-content < p class = "dấu chấm câu"> "

& gt;

& lt;

h1

& gt; < / p>

Xin chào Thế giới!

& lt; /

h1

< p class = "dấu chấm câu"> & gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Và đây là các kiểu đi kèm:

  

. demo-wrap

{

tràn

:

ẩn

;

vị trí

:

tương đối

;

}

. demo-bg

{

độ mờ

:

0,6

;

vị trí

:

tuyệt đối

;

còn lại

:

0

;

top

:

0

;

width

:

100%

;

height

:

auto

;

}

. demo-content

{

vị trí

:

tương đối

;

}

Đánh dấu và kiểu này sẽ tạo ra kết quả có văn bản ở đầu hình ảnh:

Xem Thêm  Tạo số ngẫu nhiên từ 1 đến 10 trong javascript - javascript lấy số ngẫu nhiên từ 1 đến 10

Xin chào thế giới!

demo-wrap & lt; div & gt; chính thiết lập một khối chứa định vị tuyệt đối. demo-bg & lt; img & gt; được đặt thành vị trí: tuyệt đối và được chỉ định độ mờ nhỏ. demo-content & lt; div & gt; được đặt thành position: relative và do cách sắp xếp đánh dấu, nó có ngữ cảnh xếp chồng cao hơn demo-bg . Cũng có thể sử dụng z-index để kiểm soát tốt hơn ngữ cảnh xếp chồng.

Có một số hạn chế đối với phương pháp này. Nó giả định rằng hình ảnh của bạn đủ lớn để chứa kích thước của bất kỳ phần tử nào. Bạn có thể cần thực thi các giới hạn về kích thước để ngăn hình ảnh bị cắt hoặc không bao phủ toàn bộ chiều cao của phần tử. Nó cũng sẽ yêu cầu các điều chỉnh bổ sung nếu bạn muốn kiểm soát “vị trí nền” và không có lựa chọn thay thế “lặp lại nền” rõ ràng.

Phương pháp 2 – Sử dụng CSS Pseudo-Elements

Cách tiếp cận thứ hai sẽ dựa trên các yếu tố giả. Phần tử giả : before : after có sẵn cho hầu hết các phần tử. Thông thường, bạn sẽ cung cấp giá trị content và sử dụng nó để nối thêm văn bản vào đầu hoặc cuối. Tuy nhiên, cũng có thể cung cấp một chuỗi trống và sau đó bạn có thể sử dụng các phần tử giả cho các thiết kế.

Dưới đây là một ví dụ về đánh dấu cho phương pháp này:

  

& lt;

div

class

=

"

demo-wrap

"

& gt;

& lt;

div

class

=

"

demo-content < p class = "dấu chấm câu"> "

& gt;

& lt;

h1

& gt; < / p>

Xin chào Thế giới!

& lt; /

h1

< p class = "dấu chấm câu"> & gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Và đây là các kiểu đi kèm:

  

. demo-wrap

{

vị trí

:

tương đối

;

}

. demo-wrap: before

{

nội dung

:

''

;

display

:

khối

;

vị trí

:

tuyệt đối

;

còn lại

:

0

;

top

:

0

;

width

:

100%

;

height

:

100%

;

độ mờ

:

0,6

;

background-image

:

url < / p>

(

'https://assets.digitalocean.com/labs/images/community_bg.png'

)

;

background-repeat

:

no-repeat

;

background-position

:

50% 0

;

background-size

:

cover

;

}

. demo-content

{

vị trí

:

tương đối

;

}

Đánh dấu và kiểu này sẽ tạo ra kết quả có văn bản ở đầu hình ảnh:

Xin chào thế giới!

demo-wrap & lt; div & gt; chính thiết lập một khối chứa định vị tuyệt đối. Phần tử giả : before được đặt thành position: Absolute , được gán opacity nhẹ và sử dụng background-size: cover < / code> để chiếm tất cả không gian có sẵn.

Phương pháp này có ưu điểm là hỗ trợ các thuộc tính background khác như background-position , background-repeat background- kích thước . Phương pháp này có nhược điểm là sử dụng một trong các yếu tố giả có thể xung đột với một hiệu ứng thiết kế khác - chẳng hạn như giải pháp clearfix .

Kết luận

Trong bài viết này, bạn đã tìm hiểu về hai phương pháp để khắc phục hạn chế này đối với hình nền có độ mờ.

Nếu bạn muốn tìm hiểu thêm về CSS, hãy xem trang chủ đề CSS của chúng tôi để biết các bài tập và dự án lập trình.


Xem thêm những thông tin liên quan đến chủ đề độ mờ của ảnh nền css

How To Change Background Image Opacity Without Affecting Text in CSS - CSS Background Opacity

alt

  • Tác giả: Mohsin TechWorld
  • Ngày đăng: 2020-11-27
  • Đánh giá: 4 ⭐ ( 7533 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: in this video tutorials you will learn How To Make or change Background Image Transparent/Opacity
    Without Affecting Text in CSS. in the CSS no have special property for CSS background opacity
    without affecting text, but here i will show how you make backgroud image transparent using
    pseudo selector CSS properties. using this method you will change background-image opacity in CSS without affecting text

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

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

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

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

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

  • Tác giả: vi.ichlese.at
  • Đánh giá: 4 ⭐ ( 4074 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 và ví dụ CSS Opacity

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 1018 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách thay đổi màu nền bằng CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 1872 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những khoảnh khắc thú vị nhất trong sự nghiệp của bất kỳ nhà phát triển front-end mới chớm nở nào là học cách thay đổi màu nền của trang web. Bài viết sau đây sẽ cung cấp mọi thứ bạn cần biết về cách thay đổi màu nền bằng CSS.

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á: 5 ⭐ ( 6684 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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