Component
<body> <div class="banner"> <!--- 可以加入文字 ---> </div> </body>
background
.banner{ width: 100%; height: 100vh; background-color: #ccc; background: linear-gradient(115deg, #7bf 50%, transparent 50% ), url("https://picsum.photos/1200/600?random=10") right / 100% 100%; }
顏色(圖片) 對齊方向 / 寬高
liner-gradient
旋轉角度 , color-stop1 , color-stop2
<div class="app"> <div class="background-block"></div> <div class="background-block"></div> <div class="background-block"></div> <div class="background-block"></div> </div>
.app{ position: relative; display: flex; flex-direction: column; align-items: center; height: 100vh; width: 100vw; background: linear-gradient(to bottom, #f1f4f9 15%, #cfe7fa 50%); } .background-block{ position: absolute; } .background-block:nth-child(1){ top: -10vh; min-height : 40vh; min-width : 50vw; background: #ff3d8e } .background-block:nth-child(2){ top: 50vh; left: 10vw; min-height : 30vh; min-width : 80vw; background: #fdff74; } .background-block:nth-child(3){ top: 45vh; left: 10vw; min-height: 25vh; min-width : 25vw; background: #3f99ff } .background-block:nth-child(4){ top:45vh; right:10vw ; min-height: 25vh; min-width : 25vw; background: #4ea0ff }
.background-block{ position: absolute; filter: blur(200px); }
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up