Bootstrap lớp phủ Bg

Đặc tính

Tất cả các giá trị mặc định của thuộc tính đều có thể định cấu hình trên toàn cầu

Tài sản

(Click để sắp xếp tăng dần)

Loại hình

(Click để sắp xếp tăng dần)

Mặc định

Sự mô tả

bg-color
String Màu CSS để sử dụng làm màu nền mờ của lớp phủ. Nếu được đặt, sẽ ghi đè `biến thể` propblur
String '2px'Giá trị cho bộ lọc phông nền làm mờ CSS. Đảm bảo bao gồm các đơn vị CSS. Không được hỗ trợ trong IE 11. Đặt thành null hoặc một chuỗi trống để tắt làm mờfixed
Boolean falseKhi prop `no-wrap` được đặt, sẽ sử dụng định vị cố định thay vì định vị tuyệt đối. Thuận tiện nếu bạn muốn che khuất toàn bộ trang ứng dụngno-center
Boolean falseKhi được đặt, vô hiệu hóa căn giữa theo chiều dọc và chiều ngang của nội dung lớp phủString1
` được đặt trong phần tử có vị trí tương đối được đặtString7falseDisables the fade transition of the overlayString4
BooleanfalseDisabled generating the wrapper element, and ignored the default slot. Requires that `` be placed in an element with position relative setString7
String8 hoặc String blur0Độ mờ của phông nền lớp phủ. Phạm vi hợp lệ là `0` đến `1`blur1
String blur3Thẻ phần tử để sử dụng làm phần tử lớp phủblur4
Boolean hoặc . Các giá trị hợp lệ là `true`, `'sm'`, `lg`, `circle`, `pill`, `top`, `right`, `bottom` hoặc `left`blur8falseApply rounding to the overlay to match your content routing. Valid values are `true`, `'sm'`, `lg`, `circle`, `pill`, `top`, `right`, `bottom`, or `left`blur8
BooleanfalseWhen set, shows the overlayString1
BooleanfalseWhen set, renders the default spinner in a smaller sizeString4
StringString6Type of the default spinner to show. Current supported types are 'border' and 'grow'String7
String Áp dụng một trong các biến thể màu của chủ đề Bootstrap cho công cụ quay vòng mặc định. Mặc định là sử dụng màu phông chữ hiện tạiString9
String '2px'1Biến thể màu của chủ đề nền để sử dụng cho phông nền lớp phủ'2px'2
Stringblur3Element tag to use for the overall wrapper element. Has no effect if prop `no-wrap` is set'2px'5
String8 hoặc String '2px'8Z-index giá trị để áp dụng cho lớp phủ. Bạn có thể cần phải tăng giá trị này cho phù hợp với nội dung hoặc vị trí của mình

Trong bài viết này, chúng ta sẽ học cách sử dụng image overlay đúng cách với Bootstrap. Nhưng trước đó, trước tiên, chúng ta cần biết Lớp phủ hình ảnh là gì

Lớp phủ hình ảnh. Lớp phủ hình ảnh thường đề cập đến hình ảnh là hình nền và chèn văn bản và liên kết bên trong hình ảnh đó. Nó có thể được thực hiện bằng cách sử dụng thuộc tính 'card-img-overlay' có trong bootstrap. Ngoài ra, chúng ta có thể làm điều đó với CSS bình thường cùng với chủ đề bootstrap. Hôm nay chúng ta sẽ học cả hai kỹ thuật để hiểu tài sản

ví dụ 1. Sử dụng thuộc tính 'card-img-overlay' trong bootstrap

Lúc đầu, chúng tôi cần CDN bootstrap cần thiết để sử dụng các thành phần bootstrap. Để có được những thứ đó, người ta chỉ cần truy cập trang web của họ và sao chép các liên kết đến mã của họ. Liên kết đến CDN được cung cấp bên dưới

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Từ đó, sao chép tất cả các tệp CSS và JS vào mã của bạn

Mã số

HTML




'2px'0

'2px'1____52'2px'3

 

'2px'1____55'2px'3

'2px'7____51'2px'00 '2px'01'2px'02

'2px'03

'2px'04'2px'05'2px'02'2px'07 '2px'08'2px'02

'2px'10

'2px'04'2px'12'2px'02'2px'14'2px'3

'2px'7

'2px'7____51____519'2px'3

'2px'04'2px'22

_______523____524

'2px'23'2px'26

'2px'04'2px'28

'2px'04'2px'30

_______523____532

_______523____534

'2px'23'2px'36

'2px'04'2px'28

 

'2px'04'2px'10

_______523____512

_______523____514

'2px'04'2px'28

_______504____518

'2px'23'2px'50

'2px'04'2px'28

'2px'7____554____519____53

'2px'54____55'2px'3

 

'2px'1____531'2px'3

'2px'7____51'2px'35 '2px'36'2px'02'2px'38'2px'3

_______504'2px'1____572____53

'2px'23'2px'1____576______577'2px'76'2px'3

'2px'23'2px'1'2px'35 '2px'36'2px'02'2px'15'2px'3

'2px'17'2px'1'2px'19 '2px'36'2px'02'2px'002 '2px'003'2px'02

'2px'17'2px'006'2px'3

'2px'17

'2px'17'2px'1'2px'35 '2px'36'2px'02'2px'014'2px'3

'2px'016'2px'1____5018 '2px'36'2px'02'2px'021'2px'3

'2px'023____5024

'2px'016'2px'54____5018'2px'3

'2px'016

'2px'016'2px'1____535 '2px'36'2px'02'2px'035'2px'3

'2px'023'2px'1'2px'039 '2px'01'2px'02'2px'042 '2px'36'2px'02'2px'045'2px'046

'2px'023'2px'54____5039'2px'3

'2px'023

'2px'016'2px'54____535'2px'3

'2px'17'2px'54____535'2px'3

'2px'17

'2px'17'2px'1'2px'039 '2px'01'2px'02'2px'042 '2px'36'2px'02'2px'069'2px'070'2px'039'2px'3

'2px'23'2px'54____535'2px'3

'2px'04'2px'54'2px'72'2px'3

'2px'7____554____535'2px'3

_______554____531____53

 

_______554____52____5090

đầu ra

Bootstrap lớp phủ Bg

 

Ở đầu ra, văn bản và liên kết hoạt động bình thường bên trong hình ảnh và do đó, tính năng lớp phủ hình ảnh được thể hiện

ví dụ 2. (Chỉ dùng CSS không dùng lớp Bootstrap). Trong ví dụ này, chúng tôi sẽ minh họa lớp phủ hình ảnh bằng CSS trong khi bootstrap sẽ được đưa vào mã. Nhưng trước khi viết mã, chúng tôi phải bao gồm các CDN bootstrap để có được hiệu ứng bootstrap cho trang web của chúng tôi

Mã số

HTML




'2px'0

'2px'1____52'2px'3

 

'2px'1____55'2px'3

'2px'7____51____5100'2px'101'2px'100'2px'3

'2px'7_______51'2px'00 '2px'05'2px'02'2px'07 '2px'01'2px'02

'2px'112

'2px'04'2px'08'2px'02

'2px'116

'2px'04'2px'12'2px'02'2px'14'2px'3

'2px'7

'2px'7____51____519'2px'3

'2px'04'2px'10

_______523____5130

_______523____512

'2px'04'2px'28

 

_______504____5136

'2px'23____5138

_______523____5140

'2px'23____5142

'2px'04'2px'28

 

_______504____5146

_______523____5148

_______523____5150

_______523____5152

'2px'23____5154

'2px'23____5156

'2px'23____5158

_______523____5160

'2px'23____5162

'2px'23'2px'26

'2px'23____5166

'2px'23____5168

_______523____5170

'2px'04'2px'28

 

_______504____5174

_______523____5176

'2px'04'2px'28

'2px'7____554____519____53

'2px'54____55'2px'3

 

'2px'1____531'2px'3

'2px'7____51____572____53

'2px'04'2px'1____576______577'2px'76'2px'3

'2px'04'2px'1____535 '2px'202

'2px'23____5204

'2px'23

'2px'23'2px'1'2px'35 '2px'36'2px'02'2px'211'2px'3

'2px'17'2px'1'2px'039 '2px'01'2px'02'2px'042______5219'2px'19 '2px'003'2px'02'2px'006 '2px'224'2px'02'2px'226'2px'227'2px'039'2px'3

'2px'17'2px'1'2px'35 '2px'36'2px'02'2px'235'2px'3

'2px'016'2px'1'2px'35 '2px'36'2px'02'2px'242'2px'3

'2px'023'2px'1____5018'2px'247'2px'018'2px'3

'2px'016'2px'54____535'2px'3

'2px'17'2px'54____535'2px'3

'2px'23'2px'54____535'2px'3

'2px'04'2px'54'2px'35'2px'3

'2px'7____554____572'2px'3

_______554____531____53

 

_______554____52____53

đầu ra

Bootstrap lớp phủ Bg

 

HTML là nền tảng của các trang web và được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này

CSS là nền tảng của các trang web và được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Lớp phủ Bootstrap là gì?

Thành phần lớp phủ . Điều này bao gồm, theo thứ tự chỉ số z cao nhất, danh sách thả xuống, thanh điều hướng cố định và cố định, phương thức, chú giải công cụ và cửa sổ bật lên. Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index , dropdowns, fixed and sticky navbars, modals, tooltips, and popovers.

BG có nghĩa là gì trong Bootstrap?

Các lớp dành cho màu nền là. . bg-chính ,. bg-thành công,. thông tin bg,. bg-cảnh báo,.

Bootstrap 5 BG là gì?

Bằng cách thêm một. bg-gradient, một dải màu tuyến tính được thêm làm hình nền cho nền . Dải màu này bắt đầu với màu trắng bán trong suốt mờ dần về phía dưới.

Bootstrap BG tối màu gì?

Màu nền