grid+background-attachment实现网格背景

最新推荐文章于 2023-02-16 11:29:41 发布

兔子敲代码

最新推荐文章于 2023-02-16 11:29:41 发布

阅读量226

点赞数

文章标签： html css3 css js python

本文链接：https://blog.csdn.net/qq_38499671/article/details/109237773

版权

效果：

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>