<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片背景铺满</title> <style> .container{ column-count: 4; column-gap: 2; } .item{ position: relative; padding: 2px; counter-increment: item-counter; } .item::after{ display: block; width: 24px; height: 24px; color: #fff; position: absolute; top: 2px; left: 2px; text-align: center; background-color: #000000; content: counter(item-counter); } img{ display: block; width: 100%; height: auto; } </style> </head> <body> <div class="container"> <div class="item"><img src="../A.jpg"/></div> <div class="item"><img src="../B.jpeg"/></div> <div class="item"><img src="../C.jpeg"/></div> <div class="item"><img src="../D.jpeg"/></div> <div class="item"><img src="../E.jpeg"/></div> <div class="item"><img src="../F.jpeg"/></div> <div class="item"><img src="../G.jpeg"/></div> <div class="item"><img src="../H.jpeg"/></div> <div class="item"><img src="../A.jpg"/></div> <div class="item"><img src="../B.jpeg"/></div> <div class="item"><img src="../C.jpeg"/></div> <div class="item"><img src="../D.jpeg"/></div> <div class="item"><img src="../E.jpeg"/></div> <div class="item"><img src="../F.jpeg"/></div> <div class="item"><img src="../G.jpeg"/></div> <div class="item"><img src="../H.jpeg"/></div> </div> </body> </html>
