Hướng dẫn how do i overlay images in bootstrap? - làm cách nào để chồng hình ảnh trong bootstrap?

Question

Thành phần lớp phủ Bootstrap 5

Lớp phủ đáp ứng được xây dựng với bootstrap 5. Ví dụ về hiệu ứng lớp phủ, văn bản lớp phủ trên hình ảnh, hình ảnh lớp phủ trên hình ảnh và hơn thế nữa.

Nội dung chính Show

Thành phần lớp phủ Bootstrap 5
Ví dụ cơ bản
Lớp phủ văn bản trên hình ảnh
Hiệu ứng lớp phủ
Hình ảnh lớp phủ trên hình ảnh
Lớp phủ hình ảnh thẻ
Lớp phủ phương thức
Chú thích lớp phủ
Lớp phủ glyphicon trên bảng
Khi bạn cần tăng cường độ lớp phủ (độ mờ) trên di chuột, hãy thêm lớp <div class="overlay overlay-intensity-sm"> <div class="overlay-content">Default overlay</div> </div> <div class="overlay"> <div class="overlay-content">Default overlay</div> </div> <div class="overlay overlay-intensity-lg"> <div class="overlay-content">Default overlay</div> </div>3 vào phần tử <div class="overlay"> <div class="overlay-content">Default overlay</div> </div>2 hoặc <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4.
Sơ đẳng
Lớp phủ
Lớp phủ thẻ
Lớp phủ mặc định
Lớp phủ gradient
Lớp phủ màu
Lớp phủ
Lớp phủ màu
Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để tạo ra độ dốc trong suốt màu sắc đẹp.
Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để tạo ra độ dốc trong suốt màu sắc đẹp.
Bạn không giới hạn ở màu nền màu đen. Thêm lớp <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>5 vào phần tử <div class="overlay"> <div class="overlay-content">Default overlay</div> </div>2 hoặc <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để đặt màu nền mong muốn.
Cường độ lớp phủ mặc định
Lớp phủ với màu nền chính
Làm thế nào để tôi chồng chéo hình ảnh trong bootstrap?
Làm cách nào để thêm một lớp phủ hình ảnh?
Lớp phủ Bootstrap là gì?
Làm cách nào để phủ một hình ảnh trong một div?

Ví dụ cơ bản

Lớp phủ văn bản trên hình ảnh

Bạn có thể phủ các chú thích trên hình ảnh thu nhỏ bằng cách thêm một số văn bản bên trong lớp

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

5.

Hiệu ứng lớp phủ

Để làm cho hiệu ứng lớp phủ, chỉ cần thêm

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

6 vào thùng chứa hình ảnh. Để xem thêm hiệu ứng Lớp phủ bấm vào đây.

Hình ảnh lớp phủ trên hình ảnh

Nếu bạn muốn hình ảnh lớp phủ trên hình ảnh, chỉ cần đặt hình ảnh ovarlay của bạn vào phần tử

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

5.

Lớp phủ hình ảnh thẻ

Nếu bạn muốn có lớp phủ hình ảnh thẻ trong thành phần thẻ của mình, chỉ cần sử dụng mẫu

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

8 bên dưới hình ảnh của bạn.

Tiêu đề thẻ

Đây là một thẻ rộng hơn với văn bản hỗ trợ bên dưới như là một khách hàng tiềm năng tự nhiên cho nội dung bổ sung. Nội dung này lâu hơn một chút.

Cập nhật lần cuối 3 phút trước

Lớp phủ phương thức

Cách dễ nhất để có được phương thức lớp phủ chỉ là sử dụng thành phần phương thức Bootstrap mặc định.

Chú thích lớp phủ

Để thực hiện chú thích lớp phủ, chỉ cần thêm

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

9 với

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

0 và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

1 bên dưới hình ảnh và tất cả đều được thực hiện.

Lorem Ipsum Dolor ngồi ampe.

Lớp phủ glyphicon trên bảng

Để tạo lớp phủ glyphicon trên bảng điều khiển, chỉ cần sử dụng các nút bootstrap kết hợp với các biểu tượng tuyệt vời của phông chữ. Đặt biểu tượng bên trong nút và sau đó bạn có một glyphicon đơn giản.

Nội dung lớp phủ trên CSS

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

6

Lớp phủ với di chuột

Khi bạn cần tăng cường độ lớp phủ (độ mờ) trên di chuột, hãy thêm lớp <div class="overlay overlay-intensity-sm"> <div class="overlay-content">Default overlay</div> </div> <div class="overlay"> <div class="overlay-content">Default overlay</div> </div> <div class="overlay overlay-intensity-lg"> <div class="overlay-content">Default overlay</div> </div>3 vào phần tử <div class="overlay"> <div class="overlay-content">Default overlay</div> </div>2 hoặc <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4.

Sơ đẳng

Lớp phủ gradient mặc định

Lớp phủ gradient chính

Thí dụ

Ví dụ về hiệu ứng lớp phủ Bootstrap trên các phần tử sử dụng hình nền bộ dụng cụ Torus trên thẻ bootstrap và lớp phủ tùy chỉnh trên di chuột bằng cách sử dụng các hiệu ứng bộ dụng cụ Torus.overlay effect example on elements using Torus Kit background image on Bootstrap cards, and custom overlay on hover using Torus Kit effects.

Lớp phủ

Lớp phủ mặc định

Lớp phủ chính

Lớp phủ gradient

<div class="row row-cols-3">  <div class="col">
    <div class="overlay has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Default overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>
  <div class="col">
    <div class="overlay overlay-primary has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Primary overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>
  <div class="col">
    <div class="overlay-gradient has-bg-img rounded h-10rem my-2">
      <div class="overlay-content align-items-end text-white">Gradient overlay</div>
      <img class="bg-img" src="..." alt="...">
    </div>
  </div>
</div>

Lớp phủ thẻ

Lớp phủ

Lớp phủ với màu nền mặc định

Lớp phủ màu

Lớp phủ với màu nền chính

Lớp phủ trên di chuột

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

Lớp phủ mặc định

Lớp phủ chính

Lớp phủ mặc định

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

Lớp phủ gradient

Lớp phủ thẻ

Lớp phủ

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

Lớp phủ màu

Lớp phủ với màu nền chính

Lớp phủ trên di chuột

Lớp phủ chính

Lớp phủ gradient

Lớp phủ thẻ

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

Lớp phủ gradient

Lớp phủ chính

Lớp phủ gradient

Lớp phủ thẻ

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

Lớp phủ

Lớp phủ với màu nền mặc định

Lớp phủ màu

Lớp phủ với màu nền chính

Lớp phủ trên di chuột

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

<div class="overlay-gradient overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ trên di chuột

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

<!-- Default overlay -->

<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

<!-- Secondary overlay -->

<div class="overlay overlay-secondary overlay-intensity-sm">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-secondary overlay-intensity-lg">
  <div class="overlay-content">Secondary overlay</div>
</div>

<!-- Light overlay -->

<div class="overlay overlay-light overlay-intensity-sm">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay overlay-light overlay-intensity-lg">
  <div class="overlay-content">Light overlay</div>
</div>

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ gradient mặc định

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ mặc định

Sử dụng lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 để tạo lớp phủ với màu nền

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

0 mặc định và

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

4. Thêm lớp

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

6 vào nội dung bên trong để đặt vị trí tuyệt đối và đệm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

3 mặc định.

<!-- Default overlay -->

<div class="overlay-gradient overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay-gradient overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

<!-- Secondary overlay -->

<div class="overlay-gradient overlay-secondary overlay-intensity-sm">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay-gradient overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay-gradient overlay-secondary overlay-intensity-lg">
  <div class="overlay-content">Secondary overlay</div>
</div>

<!-- Light overlay -->

<div class="overlay-gradient overlay-light overlay-intensity-sm">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay-gradient overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

<div class="overlay-gradient overlay-light overlay-intensity-lg">
  <div class="overlay-content">Light overlay</div>
</div>

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ gradient mặc địnhBootstrap card image. If your

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

5 is in

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

6, just add

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 class with

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

8 to disable the default padding.

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
 <!-- Card -->
 <div class="col">
 <div class="card card-clean">
 <div class="card-header text-white p-0 position-relative">
 <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
 <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
 </div>
 <img class="card-img-top" src="..." alt="...">
 </div>
 <div class="card-body">
 <h5>Overlay on hover</h5>
 <p class="small text-body">Overlay with custom background color, transparency and effects</p>
 </div>
 </div>
 </div>
 <!-- end Card -->
</div>

0

Bạn không giới hạn ở màu nền màu đen. Thêm lớp <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>5 vào phần tử <div class="overlay"> <div class="overlay-content">Default overlay</div> </div>2 hoặc <div class="overlay-gradient"> <div class="overlay-content">Default gradient overlay</div> </div>4 để đặt màu nền mong muốn.

Nền vững chắc

Lớp phủ thứ cấp

Lớp phủ ánh sángheight explicitly to parent

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 element, because the

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

9 gets

<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

0.

Cường độ lớp phủ

Nếu cường độ lớp phủ mặc định (độ mờ) quá mạnh hoặc quá nhẹ, bạn có thể thay đổi nó bằng cách thêm

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

8 thành phần tử

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 hoặc

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4. Biến thể

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

1 thay đổi độ mờ thành

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

2, trong khi

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

3 thay đổi thành

<div class="overlay overlay-primary">
  <div class="overlay-content">Primary overlay</div>
</div>

<div class="overlay overlay-secondary">
  <div class="overlay-content">Secondary overlay</div>
</div>

<div class="overlay overlay-light">
  <div class="overlay-content">Light overlay</div>
</div>

4.

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

1

Cường độ lớp phủ mặc định

Lớp phủ mặc định (màu đen) mà không có bất kỳ sửa đổi nào.hover, add

<div class="overlay overlay-intensity-sm">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

<div class="overlay overlay-intensity-lg">
  <div class="overlay-content">Default overlay</div>
</div>

3 class to

<div class="overlay">
  <div class="overlay-content">Default overlay</div>
</div>

2 or

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 element.

Lớp phủ trên di chuột

Lớp phủ mặc định

Lớp phủ với màu nền tùy chỉnh, độ trong suốt và hiệu ứng

Lớp phủ thẻ

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

2

Nếu màu nền rắn không phải là thứ bạn đang tìm kiếm, hãy sử dụng

<div class="overlay-gradient">
  <div class="overlay-content">Default gradient overlay</div>
</div>

4 để tạo ra độ dốc trong suốt màu sắc đẹp.

Lớp phủ

Lớp phủ với màu nền mặc định

Lớp phủ màu

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

3

Lớp phủ với màu nền chính

Lớp phủ trên di chuột

<div class="row row-cols-1 row-cols-lg-3 row-cols-flex g-4">  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay">
        <p class="overlay-content">Card with default overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay</h5>
        <p class="small text-body">Overlay with default background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 overlay overlay-primary">
        <p class="overlay-content">Card with primary overlay</p>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Color overlay</h5>
        <p class="small text-body">Overlay with primary background color</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
  <!-- Card -->
  <div class="col">
    <div class="card card-clean">
      <div class="card-header text-white p-0 position-relative">
        <div class="overlay-content bg-maroon bg-opacity-80" data-tor="hover:fade.in" data-tor-parent="hover">
          <p data-tor="hover(p):pull.up(sm)">Card with overlay hover effect</p>
        </div>
        <img class="card-img-top" src="..." alt="...">
      </div>
      <div class="card-body">
        <h5>Overlay on hover</h5>
        <p class="small text-body">Overlay with custom background color, transparency and effects</p>
      </div>
    </div>
  </div>
  <!-- end Card -->
</div>

4

Làm thế nào để tôi chồng chéo hình ảnh trong bootstrap?

Để làm cho hiệu ứng lớp phủ chỉ cần thêm .hover-Overlay vào thùng chứa hình ảnh.add . hover-overlay to the image container.

Làm cách nào để thêm một lớp phủ hình ảnh?

Một trong những cách đơn giản nhất để thêm lớp phủ hình ảnh hoặc văn bản là sử dụng các thuộc tính CSS và các yếu tố giả.Nói tóm lại, các hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng các tính chất sau: hình ảnh nền và nền CSS để thêm hiệu ứng lớp phủ hình ảnh và tuyến tính.using CSS properties and pseudo-elements. In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect.

Lớp phủ Bootstrap là gì?

Các thành phần lớp phủ Bootstrap bao gồm một số thành phần hoạt động như một lớp phủ của một số loại.Điều này bao gồm, theo thứ tự chỉ số Z cao nhất, thả xuống, các điều hướng cố định và dính, phương thức, chú giải công cụ và popover.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.

Làm cách nào để phủ một hình ảnh trong một div?

Bạn có thể sử dụng thuộc tính Vị trí CSS kết hợp với thuộc tính Z-Index để phủ một div riêng lẻ so với một phần tử div khác.Thuộc tính chỉ số z xác định thứ tự xếp chồng cho các phần tử được định vị (nghĩa là các phần tử có giá trị vị trí là một trong số tuyệt đối, cố định hoặc tương đối).use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

programming bootstrap Image overlap Bootstrap Bootstrap Image hover