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-width: 300px;
  width: 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

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, 禁止转载 ???，侵权必究??！