Cách chồng lấp hình ảnh trong CSS

[ad_1]

          

 chồng chéo-hình ảnh-cover3

Một cái gì đó rất phổ biến trong thiết kế web hiện đang là hình ảnh chồng chéo. Khi thiết kế được trao cho bạn, với tư cách là nhà phát triển để thực hiện nó, có một vài cách để thực hiện nó giống như hầu hết mọi thứ với CSS.

Một cách bạn có thể tiếp cận đó là bạn có thể hoàn toàn định vị một yếu tố có chỉ số z thấp hơn để đặt hình ảnh khác lên trên cùng, điều chỉnh độ rộng trên mỗi hình ảnh, do đó bạn có thể thấy cả hai Họ và gọi đó là ngày, phải không?

Vâng, một khi bạn cần văn bản hoặc bất kỳ nội dung nào khác sau các hình ảnh, bạn sẽ gặp phải một vấn đề. Nếu phần tử được định vị tuyệt đối cao hơn hình ảnh tĩnh (trên cùng), nội dung sau sẽ chồng lên hình ảnh. Điều này là do chiều cao của hình ảnh được định vị tuyệt đối không được nhận ra do nó LÊN ra khỏi luồng tài liệu, (một hành vi bình thường đối với một yếu tố được định vị tuyệt đối). Để giải quyết vấn đề này, bạn có thể bắt đầu thử độ cao tùy ý trên các hình ảnh và thành phần sau đó trở nên rất mỏng manh, hạn chế và hack rất nhanh.

Điều tiếp theo bạn biết, bạn đã tìm thấy những ngày sau đó mà không có thức ăn hay nước uống cuối cùng của những giọt nước mắt không thể kiểm soát của bạn. Đó là một nơi tối tăm, tôi không muốn giới thiệu nó.

Một ví dụ về những gì tôi nói về nó là ở đây:

   Xem Bút
  image-stack-bad-example
bởi Bri Camp (@brianacamp)
  trên CodePen.

  

Tin tốt: có một cách tốt hơn nhiều và đừng thử con đường đầu tiên đó trừ khi bạn tận hưởng nỗi đau.

Tôi sẽ viết ra hai cách tiếp cận vững chắc cho các hình ảnh chồng chéo mà không có nội dung trùng lặp với thành phần hình ảnh tuyệt vời của chúng tôi, Illll gọi một cách trìu mến là ngăn xếp hình ảnh trên giường.

Phương pháp 1: Lưới CSS

Trước khi tôi bắt đầu nghe những lời cằn nhằn về việc cần hỗ trợ IE và cách bạn không thể sử dụng CSS Grid, tôi nói rằng bạn có thể sử dụng CSS Grid và dễ dàng sử dụng lại cho IE mà tôi sẽ chỉ cho bạn cách làm cuối cùng phần của bài này.

. không có lấy một thứ ra khỏi luồng tài liệu thông thường!

Đầu tiên chúng tôi sẽ phân tích thành phần này:

Một số điều cần lưu ý:

      

  1. Thành phần này sẽ hoạt động bất kể chiều cao của hình ảnh trên cùng hoặc dưới cùng. (Một cái gì đó cần tính đến khi khách hàng có thể tải lên bất kỳ hình ảnh nào thông qua CMS)
  2.   

  3. Hình ảnh trên cùng sẽ luôn bị đẩy xuống một chút từ trên xuống và sẽ thẳng hàng với cạnh trái của container.

 ví dụ-1

Cấu trúc HTML

  
          
  •                
  •       
  •                
  •    

Một cái gì đó chúng ta cần tính đến là độ rộng của các cột của lưới cần phải như thế nào. Như đã đề cập trước đây, bạn có thể tiếp cận một số cách, nhưng tôi sẽ sử dụng 12 cột vì lưới 12 cột được sử dụng thường xuyên.

Để thực hiện điều đó, trên phần tử cha có chứa các phần tử, trong CSS của chúng tôi, chúng tôi sẽ viết:

  .image-stack {
    hiển thị: lưới;
    lưới-mẫu-cột: lặp lại (12, 1fr);
    vị trí: tương đối;
  }
 

cột-mẫu-cột là thuộc tính quy định số lượng cột sẽ có và cột 1fr dành cho trình duyệt để tính dung lượng trống. Nó có ích khi bạn có khoảng trống cột và hàng. Hoan hô tính toán trình duyệt!

vị trí: tương đối là bắt buộc ở đây: đó là những gì cho phép chỉ số z trên hình ảnh hoạt động như mong đợi.

Vì vậy, bây giờ chúng ta có lưới điện hoạt động, bước tiếp theo là xem xét độ rộng của hình ảnh:
 ví dụ-1-số

Để thêm chiều rộng của chúng tôi cho mỗi hình ảnh dựa trên thiết kế, tâm trí của tôi hoạt động theo tỷ lệ phần trăm, vì vậy hãy bắt đầu với tổng chiều rộng của thành phần hình ảnh là 844px bằng 100%. Chiều rộng hình ảnh trên cùng là 521px . Tôi chia 521px / 844px * 100 bằng 61,7%, làm tròn đến 62% và bạn nhận được một số chính xác ở giữa 7/12 (58%) và 8/12 (66%) ha! Hãy để Lừa đi với 66%.

Đối với hình ảnh hàng đầu của chúng tôi, chúng tôi sẽ viết như sau bằng CSS:

  .image-stack__item - top {
      cột lưới: 1 / nhịp 8;
      hàng lưới: 1; // phải nằm trên cùng một hàng với hình ảnh khác
      đệm lót: 20%; // điều này sẽ đẩy hình ảnh xuống và giữ tỷ lệ khi nó thay đổi kích thước
      chỉ số z: 1; // làm cho hình ảnh này hiển thị trên cùng của dưới cùng
    }
      
 

Đối với hình ảnh thứ hai của chúng tôi, chúng tôi sẽ tính toán (645px / 844) * 100 = 76,4% . Chúng tôi sẽ làm tròn xuống 75%, hoàn toàn đi vào lưới 12 cột của chúng tôi. 9/12. Vì vậy, để làm điều đó, chúng tôi sẽ đảm bảo hình ảnh phía dưới của chúng tôi kéo dài 9 cột và bắt đầu nó ở đường lưới thứ 4 và trải rộng toàn bộ phần còn lại của lưới, đó là những gì -1 . Bạn có thể nghĩ về -1 là kết thúc nếu điều đó có ích!

CSS hình ảnh dưới cùng của chúng tôi sẽ trông như thế này:

  .image-stack__item - bottom {
    cột lưới: 4 / -1;
    hàng lưới: 1; // làm cho hình ảnh này nằm trên cùng một hàng
  }
 

   Xem Bút
  chồng chéo-hình ảnh-css-lưới-ví dụ
bởi Bri Camp (@brianacamp)
  trên CodePen.

Et voila! Với lưới CSS và rất ít mã, bạn có thể bắt đầu chồng chéo tất cả những thứ bao gồm văn bản trên hình ảnh, văn bản trên văn bản (oh my!), Hình ảnh trên vải. Bạn đặt tên cho nó, web là hàu của bạn! Cuối tuần!

Cách 2: Nổi với lợi nhuận âm

Vì vậy, trong trường hợp bạn để hỗ trợ IE. Sau đó, phần này là dành cho bạn.

Phương pháp này đòi hỏi ole phải lấy phần tử dang ra khỏi chiến thuật dòng chảy tài liệu và chúng tôi sẽ thực hiện nó với phao!

Bạn bè và người quản lý của tôi Jake Fentress đã đưa ra giải pháp này mà tôi đã áp dụng cho trang Glossier vì chúng tôi cần hỗ trợ IE11.

Tin tốt là cấu trúc không thay đổi một chút.

Đối với phần tử hình ảnh chúng tôi sẽ thêm một mã xóa vì chúng tôi nổi các phần tử con của nó và cần nội dung hiển thị bên dưới:

  .image-stack :: sau {
  Nội dung: ' ';
  hiển thị: bảng;
  rõ ràng: cả hai;
}
  
 

Sau đó, đối với hình ảnh trên cùng, chúng tôi sẽ thêm:

  .image-stack__item - top {
    phao: trái;
    chiều rộng: 66%;
    lề phải: -100%;
    đệm lót: 15%; // tùy ý
    vị trí: tương đối;
    chỉ số z: 1;
}
 

Biên độ âm ở đây là bắt buộc để làm việc này. Lợi nhuận âm là thực sự kỳ lạ. Tùy thuộc vào việc nó có một lề âm ở trên hay dưới, nó sẽ hoạt động khác đi nếu bạn áp dụng lề âm ở bên trái và bên phải và chúng hoạt động khác nhau trên các phần tử nổi.

Chúng tôi đã áp dụng lề phải âm trên phần tử nổi bên trái cho phép nội dung chồng lấp. -100% bằng với chiều rộng của vật chứa để nó dịch chuyển hình ảnh sang trái và cho phép hình ảnh phía dưới hiển thị bên dưới nó như thể nó không nằm trong DOM.

Codepen tại đây:

   Xem Bút
  hình ảnh chồng chéo với hình nổi
bởi Bri Camp (@brianacamp)
  trên CodePen.

Nếu bạn muốn biết thêm thông tin về tỷ lệ lợi nhuận âm, tôi khuyến khích bạn đọc Hướng dẫn dứt khoát để sử dụng lợi nhuận âm. Bài báo đó đã đi sâu vào tất cả các trường hợp sử dụng lề âm và các hành vi không mong muốn.

Giải pháp dự phòng (Phương pháp nổi và lưới CSS)

Phần này sẽ cung cấp cho bạn tốt nhất cả hai thế giới, CSS hiện đại cho các trình duyệt hiện đại và dự phòng cho IE11.

Phần quan trọng nhất ở đây là @supports truy vấn tính năng. Chúng tôi sẽ sử dụng nó để kiểm tra xem trình duyệt có hỗ trợ giá trị của màn hình không: lưới . Trước tiên, chúng tôi đặt IE hoặc CSS dự phòng trước khi chúng tôi thêm truy vấn tính năng @supports . Khi chúng tôi thêm CSS hiện đại, các số float sẽ không còn bị ảnh hưởng do lưới điện đang chiếm lĩnh. Trong truy vấn tính năng hỗ trợ, chúng tôi sẽ đặt lại chiều rộng thành 100% và bạn có thể xóa thuộc tính float hoặc để nguyên vì nó không ảnh hưởng đến các phần tử.

Đây là codepen cuối cùng và ví dụ chỉ ra rằng:

   Xem Bút
  Hình ảnh chồng lấp với lưới css và dự phòng
bởi Bri Camp (@brianacamp)
  trên CodePen.

Tôi hy vọng bài viết này hữu ích cho bạn và thực hiện ước mơ bố trí của bạn! Đi ra và chồng chéo tất cả mọi thứ!

Hãy khỏe!

        


[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.