Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Thư viện HTML Flexbox

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 01:48:38 27 4
mua khóa gpt4 Nike

Tôi đang cố gắng tạo một thư viện 9 × 9 đáp ứng với lớp phủ khi di chuột (cố gắng sử dụng div có màu sắc và văn bản). Như thế này:Trượt trong Lớp phủ từ dưới lên .

Tuy nhiên, tôi không thể ghi đè hoàn toàn hình ảnh. Bây giờ tôi đang cố gắng sử dụng Flexbox nhưng tôi cũng không hiểu nó.

HTML với hình ảnh trông như thế này:


  


    

      
Project 01

    

      
Project 02

    

      
Project 03

    

      
Project 04

    

      
Project 05

    

      
Project 06

    

      
Project 07

    

      
Project 08

    

      
Project 09

CSS tôi hiện đang sử dụng là thế này:

.container {
  lề: 0 tự động;
  chiều rộng tối đa: 100%;
  padding: 0;
  màu nền: đỏ;
}

hình ảnh {
  phần đệm: 2px;
  display: block;
  chiều rộng tối đa: 100%;
  chỉ số z: 1;
}

.tế bào {
  margin: 0;
  padding: 0;
}

.lớp phủ {
  phần đệm: 0px;
  display: block;
  position: relative;
  màu nền: đen;
  width: 100%;
  chiều cao: 100%;
  chỉ số z: 10;
}

Truy vấn truyền thông:

Màn hình @media và (min-width: 600px) {
  .lưới {
    hiển thị: linh hoạt;
    flex-wrap: bọc;
    hướng linh hoạt: hàng;
  }
  .tế bào {
    chiều rộng: 50%;
  }
}

Màn hình @media và (min-width: 1000px) {
  .tế bào {
    chiều rộng: calc(100% / 3);
  }
}

Hiện tại, mọi thứ trên 1000px đều trông như thế này:

Hiện hành

Màu đỏ là Flexboxgrid (vị trí ban đầu)lớp="lưới". Màu tím là hình ảnh (vị trí bị thiếu hiện tại), màu đen (độ mờ 0,5) khớp chính xác với lưới màu đỏ.

Làm cách nào tôi có thể khớp chính xác các div lớp phủ với cùng một phần đệm 2px trên một hình ảnh?

câu trả lời hay nhất

Ý tưởng chung là liên quan đến .tế bào Định vị lớp phủ hoàn toàn trên hình ảnh và sử dụng dịchY() di chuyển nó ra . .cell: di chuột

tế bào trên và chuyển đổi dịchY() 

.container {
  lề: 0 tự động;
  chiều rộng tối đa: 100%;
  padding: 0;
  màu nền: đỏ;
}

hình ảnh {
  phần đệm: 2px;
  display: block;
  chiều rộng tối đa: 100%;
  chỉ số z: 1;
}

.lưới {
  hiển thị: linh hoạt;
  flex-wrap: bọc;
}

.tế bào {
  margin: 0;
  padding: 0;
  position: relative;
  tràn: ẩn;
}

.lớp phủ {
  phần đệm: 0px;
  display: block;
  position: relative;
  màu nền: đen;
  width: 100%;
  chiều cao: 100%;
  chỉ số z: 10;
  position: absolute;
  trên cùng: 0; trái: 0;
  biến đổi: dịchY(100%);
  chuyển tiếp: biến đổi .5s;
  color: white;
  hiển thị: linh hoạt;
  căn chỉnh các mục: giữa;
  biện minh-nội dung: trung tâm;
}

.cell:hover .overlay {
  biến đổi: dịchY(0);
}

  

    

      
văn bản

      Dự án 01
    

    

      
văn bản

      Dự án 01
    

    

      
văn bản

      Dự án 01

Về Thư viện Flexbox HTML, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/43969566/

27 4 0
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress