CSS background multi lineargradient All In One

CSS background multi linear-gradient All In One

:root {
  --color-pink: rgb(255, 221, 221);
}

div {
  box-sizing: border-box;
  border: 1px solid red;
  min-height: 200px;
  min- 300px;
   50vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 色块比例 5: 10 */ 
/*  逆序 */
.multi-linear-gradient {
  background: linear-gradient(
    90deg, 
    white 0%, white 40%,
    var(--color-pink) 40%, var(--color-pink) 50%, 
    white 50%, white 55%,
    var(--color-pink) 55%, var(--color-pink) 65%, 
    white 65%, white 70%,
    var(--color-pink) 70%, var(--color-pink) 80%, 
    white 80%, white 85%,
    var(--color-pink) 85%, var(--color-pink) 95%, 
    white 95%, white 100%,
  );
}

.multi-linear-gradient-alias {
  background: linear-gradient(
    90deg, 
    white 40%,
    var(--color-pink) 40%, var(--color-pink) 50%, 
    white 50%, white 55%,
    var(--color-pink) 55%, var(--color-pink) 65%, 
    white 65%, white 70%,
    var(--color-pink) 70%, var(--color-pink) 80%, 
    white 80%, white 85%,
    var(--color-pink) 85%, var(--color-pink) 95%, 
    white 95%,
  );
}

.multi-linear-gradient-keyword {
  background: linear-gradient(
    to right, 
    white 40%,
    var(--color-pink) 40%, var(--color-pink) 50%, 
    white 50%, white 55%,
    var(--color-pink) 55%, var(--color-pink) 65%, 
    white 65%, white 70%,
    var(--color-pink) 70%, var(--color-pink) 80%, 
    white 80%, white 85%,
    var(--color-pink) 85%, var(--color-pink) 95%, 
    white 95%,
  );
}

pre {
  color: #0f0;
  margin-left: 10px;
  background: rgba(0, 0, 0, 0.3);
}

CSS linear gradient Generator

// TS version
const linearGradientGenerator = (options) => {
  const {
    selector = '',
    direct = 'to right',
    steps = [5, 10],
    days = [1,2,3,4,5,6,7],
    colors = ['white', 'pink'],
  } = options;
  const bgs = [];
  const max = 100;
  for (const [i, item] of days.entries()) {
    const temp = max - i * (steps[1] + steps[0]);
    const mid = temp - steps[0];
    const min = mid - steps[1];
    if(i === 0) {
      bgs.unshift(`
        ${colors[1]} ${min}%, ${colors[1]} ${mid}%,
        ${colors[0]} ${mid}%, ${colors[0]} ${temp}%
      `);
      // pink 85%, pink 95%
      // white 95%, white 100%,
    } else {
      bgs.unshift(`
        ${colors[1]} ${min}%, ${colors[1]} ${mid}%,
        ${colors[0]} ${mid}%, ${colors[0]} ${temp}%,
      `);
      // pink 70%, pink 80%
      // white 80%, white 85%,
    }
    if(i === days.length - 1) {
      bgs.unshift(`
        ${colors[0]} 0%, ${colors[0]} ${min}%,
      `);
    }
  }
  const background = `linear-gradient(${direct}, ${bgs.join('')})`;
  const dom = document.querySelector(selector);
  console.log('\nbackground =', background);
  if(dom) {
    dom.style.background = background;
  }
}

const days = [...new Uint8Array(7)].map((item, i) => i + 1);

// const days = [...new Uint8Array(13)].map((item, i) => i + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

// [...``.padEnd(13)].map((item, i) => i + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
// [...``.padEnd(13).split('')].map((item, i) => i + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
// [...Array.from(``.padEnd(13))].map((item, i) => i + 1);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

// Uint8ClampedArray

linearGradientGenerator({
  selector: '#app',
  direct: '90deg',
  steps: [3, 7],
  days: [...days],
  colors: ['white', 'pink'],
});

/* 色块比例 5: 10 */
/*

.multi-linear-gradient-alias {
  min-height: 200px;
  background: linear-gradient(
    to right,
    white 0%, white 25%,
    var(--color-pink) 25%, var(--color-pink) 35%,
    white 35%, white 40%,
    var(--color-pink) 40%, var(--color-pink) 50%,
    white 50%, white 55%,
    var(--color-pink) 55%, var(--color-pink) 65%,
    white 65%, white 70%,
    var(--color-pink) 70%, var(--color-pink) 80%,
    white 80%, white 85%,
    var(--color-pink) 95%, var(--color-pink) 100%
  );
}

*/

CSS multiple backgrounds

.element {
  background: 
   url(cool.jpg) top left/50px 50px no-repeat,
   url(cool.jpg) center/50px 50px no-repeat;
}

.hero {
  min-height: 350px;
  background: 
    url("table.jpg") center/cover no-repeat,
    url("konafa.svg") center/50px no-repeat;
}

https://ishadeed.com/article/css-multiple-backgrounds/

HTML5 meta & SEO

http-equiv & favicon

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <link rel="icon" type="image/png" href="https://cdn.xgqfrms.xyz/logo/favicon.png">
    <link rel=”apple-touch-icon-precomposed” href=”https://cdn.xgqfrms.xyz/logo/logo.png”>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title></title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  </style>
  <!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
  <header>
    <h1></h1>
  </header>
  <main>
    <article>
      <section>
        <a href="https://feiqa.xgqfrms.xyz/index.html"></a>
      </section>
    </article>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2021</p>
  </footer>
  <!-- js -->
  <script>
    const log = console.log;
  </script>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

https://www.runoob.com/tags/att-meta-http-equiv.html

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

https://css-tricks.com/css3-gradients/

https://css-tricks.com/almanac/properties/b/background/

https://css-tricks.com/perfect-full-page-background-image/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---