div+css实现图片奇特布局效果代码-html代码-BFW代码库

div+css实现图片奇特布局效果代码

代码语言：html

代码描述：div+css实现图片奇特布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
.grid {
  --spacing: 10px;
  display: grid;
  gap: var(--spacing);
  grid-template-areas: "a b c" "a b c" "a b e" "d d e" "d d e";
  height: calc(100vh - (var(--spacing) * 2));
  margin: var(--spacing);
}
.grid__item {
  background-color: white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.grid__item--a {
  grid-area: a;
  background-image: url(//repo.bfw.wiki/random/600x500/景色);
  background-attachment: fixed;
}
.grid__item--b {
  grid-area: b;
  background-image: url(//repo.bfw.wiki/random/600x500/风景);
  background-attachment: fixed;
}
.grid__item--c {
  grid-area: c;
  background-image: url(//repo.bfw.wiki/random/300x300/雪山);
}
.grid__item--d {
  grid-area: d;
  background-image: url(//repo.bfw.wiki/random/.........完整代码请登录后点击上方下载按钮下载查看