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

代码语言:html

所属分类:布局界面

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

代码标签: 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 ;
  }
}
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0