grid+background-attachment实现网格背景
七娃博客151 次
效果:
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>
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:grid+background-attachment实现网格背景 - Qui-Note
评论 | 0 条评论