首页用H5写一个蜂巢网格，网格可以设置图片背景

用H5写一个蜂巢网格，网格可以设置图片背景

时间: 2024-05-25 21:18:00 浏览: 143

<!DOCTYPE html> <html> <head> <title>蜂巢网格</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; background-image: url('https://picsum.photos/id/237/600/600'); background-size: cover; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.7); padding: 20px; font-size: 30px; text-align: center; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } </style> </head> <body> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> </body> </html>

阅读全文