div+css布局实现文字图片渐变堆叠效果代码-html代码-BFW代码库

div+css布局实现文字图片渐变堆叠效果代码

代码语言：html

代码描述：div+css实现文字图片渐变堆叠效果代码

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

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

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

  
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
html, body, div {
  display: grid;
}

html {
  min-height: 100%;
}

/* so it covers entire viewport */
body {
  --s: 4px;
  /* set this as a CSS var to modify in MQ later */
  --o: .5*var(--s);
  background: url(//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png) 50%/cover;
  /* set here because of Safari bug 🪲 267185
   * https://bugs.webkit.org/show_bug.cgi?id=267185 */
  font: clamp(5em, Min(65vh, 35vw), 39em)/0.75 bebas neue, sans-serif;
  /* because Safari doesn't support this */
}
@media (min-width: 480px) and (min-height: 320px) {
  body {
    --s: 6px ;
  }
}
@supports (line-height: 1cap) {
  body {
    line-height: 1cap;
  }
}

div {
  /* store in CSS var part of stop list used by two gradients */
  --sl: calc(50% - .5px), #0000 calc(50% + .5px);
  /* place div in middle of `body` grid cell 
   * (covering entire `content-box` of `body`) */
  place-self: center;
  /* place text content in the middle of the one grid cell 
   * covering entire `content-box` of `div` itself.........完整代码请登录后点击上方下载按钮下载查看