grid+background-attachment实现网格背景
七娃博客1,071人阅读
效果:
css:
.container { position: absolute; width: 100%; height: 100%; background:#fff; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 30fr 30fr 30fr 30fr; grid-gap: 10px; } .item_img { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; }
html:
<div class="container"> <div class="item_img">1</div> <div class="item">2</div> <div class="item_img">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item_img">6</div> <div class="item">7</div> <div class="item_img">8</div> <div class="item_img">9</div> <div class="item">10</div> <div class="item_img">11</div> <div class="item">12</div> <div class="item">13</div> <div class="item_img">14</div> <div class="item">15</div> <div class="item_img">16</div> </div>
评论 | 0 条评论
登录之后才可留言,前往登录