如何将线性渐变CSS应用到背景颜色相互重叠的任意2个范围？

问题描述 投票：0回答：2
html css background-color
2个回答
1
投票

您可以为任何跨度提供一门课程并为他们提供样式

1
投票

解决方案（解决方法）

jsfiddle：突出显示背景颜色重叠（soln）

1 .

你需要一个

Master class
（CSS样式规则）

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}

2.

向每个元素添加额外的 

Master class

<span class="highlightYellowPaint hlBackgroundMs">Linux</span>

3.

3 .1

将变量 

--color-main
添加到 
Master class
；

3 .2

并使用 

--color-main
为用于突出显示的所有 Css 样式规则分配颜色（而不是使用 
background-color
）

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}
span.highlightYellowPaint {
  --color-main: rgba(255,237,0,0.50);
  /* background-color: rgba(255,237,0,0.50); */
}

4.

4 .1

选择 

outer span
的颜色并将其分配给 
--color-main-outerspan

4 .2

使用 

linear-gradient
& 
var(--color-main)
 将 2 种颜色分配给
var(--color-main-outerspan)

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);  
}

限制和注意事项::

  1. 这可能仅适用于 2 种颜色

  2. p > span.hlBackgroundMs
    用于选取
    outer span
    ，仅限于某些情况

    • （注意：如果您的浏览器支持
      span.hlBackgroundMs:has(> span.hlBackgroundMs)
      ，
      :has()
      可能会更好）

  3. 更多嵌套（lv 3+）

    span
    可能不起作用

  4. 逻辑不太好理解（可能有更好的方法）

  5. 你可以只使用透明度为 0 的 alpha（为了简化工作）

  6. 纯CSS（你也可以使用js来实现）

思考过程::

重点是：_

  1. 能够从 

    (parent) outer span
    和 
    (child) inner span

    中选择颜色

  2. 选择 

    inner span
    ，然后将这 2 种颜色分配给它的 
    linear-gradient
    。

=>

  • 能够从（内/外跨度）Css样式规则旁边选择颜色

    -> 你需要使用一个变量 

    --color-main

  • 能够与 diff 和 Css 样式规则一起共享变量

    • （例如：在 
      highlightContentObject
      和 
      highlightTechStack
      之间共享），

    -> 您需要为该元素使用额外的 Master 类 

    span.hlBackgroundMs
    （用于存储和共享该变量 
    --color-main
    ）

  • 能够区分 2 个不同的颜色（而不是一直选择 

    inner span
    的 
    --color-main
    ）

    -> 您需要使用另一个变量 

    --color-main-outerspan
    来存储 
    outer span

    中的颜色

  • 能够“存储来自

    outer span
    的颜色”

    -> 你需要先区分“外”和“内”

    ->

    • p > span.hlBackgroundMs
      <=>外

    • span.hlBackgroundMs > span.hlBackgroundMs
      <=>内在

  • （逻辑全部设置，赋值）

（更新）

随着

span
变得越来越嵌套，您可以尝试以下技巧。

  • （不过，随着嵌套变得越来越复杂，这些技巧就越不可靠......）

  • （重点是从

    outer span
    获取颜色）

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}

p > span > span.hlBackgroundMs {
  --color-main-outerspan-lv2: var(--color-main);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv2) 50%);
}

/*p > span > span > span.hlBackgroundMs {
  --color-main-outerspan-lv3: var(--color-main);
}
p > span > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}*/
p > span > span > span > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}

更新：

  1. 之前更新的CSS规则非常糟糕

  2. 添加 4 个解决方案：1 个在 Javascript 中，3 个在（纯）Css 中

  3. 最初的思考过程是以下3种CSS方法的基础

// /*
// [V1-M1]
// store the var color as `--color-main-outerspan: var(--color-main);`
// ```
// p > .hlBackgroundMs {
//   --color-main-outerspan: var(--color-main);
// }
// /-* ;not_working; p :not(span.hlBackgroundMs) span.hlBackgroundMs {
//   --color-main-outerspan: var(--color-main);
// }*-/
// .hlBackgroundMs > .hlBackgroundMs {
//   background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
// }
// ```
// the old crappy `p > span > .hlBackgroundMs { --color-main-outerspan-lv2: var(--color-main); }`
// for more nested case
// 
// intrinsic/internal/basic idea is preserved in other methods
// 
// [V1/V2-M2]
// js (simple idea)
// 
// [V2-M3]
// select scope _shallower -> deeper_ + _narrower -> wider_ store var(--color-main) & reverse order assign lineargradient
// 
// [V2-M4]
// select scope _shallower -> deeper_ + _each individual scope(/layer)_ store var(--color-main) & assign lineargradient
// (the most intuitive way)
// 
// [V2-M5]
// select scope _shallower -> deeper_ + _narrower -> wider_ store var(--color-main) & assign lineargradient + inherit
// 
// */

解决方案js [V1/V2-M2]

  • @logic::（直接）

    1. 在每个 

      .hlBackgroundMs
      元素内循环

    2. 将所有上一个父元素的

      background-color
      存储在同一（垂直）分支中

    3. 将 

      linear-gradient
      css 规则分配给每个元素，使用这些 
      background-color

  • @注::

    • 您可能需要更改代码中的一些参数，以适合您自己的情况，尤其是

      .hlBackgroundMs
      和
      'linear-gradient(-1deg'

    • （未提供示例源代码（我的测试用例有点太多））

      （以下核心源码留有草稿注释未清理）

let det_AllCssFileLoaded = false;
window.onload = function () {
  det_AllCssFileLoaded = true;
};

$(function () {
  // ;Method[use js to fix overlapped background color]; 
  applyLineargradientToElementsWithOverlappedBackgroundColor();
});


async function applyLineargradientToElementsWithOverlappedBackgroundColor() {
  // #>>< wait until css file is loaded
  let i = 1;
  while (!det_AllCssFileLoaded) {
    await new Promise(r => setTimeout(r, 10));
    i++;
    if (i >= 200) {
      console.log('>> while (!det_AllCssFileLoaded && i < 200) @Warning -- reach max loop, css may not be loaded & css rule may be undefined when accessed :: ' + i);
      break;
    }
  }
  
  // ;output-draft; let html_ResultAppend = '';
  // ;output-draft; let hr_1 = '<hr style="border-top: 1px solid #000000;">' + '\n';
  // ;output-draft; let hr_2 = '<hr style="border-top: 1px solid #FCD164;">' + '\n';
  // ;output-draft; let count_BtmLeaf = 0;
  // ;output-draft; let sn_DepthLayer_InRecursion = 0;

  // #>> pick the element that has background color overlapped (view it as a hierachy tree)
  let jqElt_hierachyTop = $('.hlBackgroundMs:has(.hlBackgroundMs):not(.hlBackgroundMs .hlBackgroundMs)');
  
  // #>>> loop + recursion inside each element
  jqElt_hierachyTop.each(function () {
    // ;output-draft; html_ResultAppend += hr_1;
    recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(this);
  });
  
  // Depth-first search (DFS) -- scan/recursion direction : vertical first, then horizontal
  function recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(elt_Main, arr_elt_hierachyVerticalLv = []) {
    // ;output-draft; sn_DepthLayer_InRecursion++;
    
    // #>>> fill the vertical branch in each recursion -- once reach bottom, retrive overlapped background color from this array
    arr_elt_hierachyVerticalLv.push(elt_Main);
    
    // #>>> pick the child element under this current elt_Main element
    // the child element must be the not-nested-with-other-.hlBackgroundMs ones
    //   ((direct child wont work, cuz the child element could nest in other tags like <b> <strike>))
    
    // this `selector = '.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs)';`` should work, but no
    // use array subtract instead... 
    // see https://stackoverflow.com/questions/75038754/jquery-find-use-with-not-selector-is-missing-some-elements-the-selector
    let arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv;
    let arr_elt_hierachyAll = $(elt_Main).find('.hlBackgroundMs').toArray();
    let arr_elt_hierachyMidBtm = $(elt_Main).find('.hlBackgroundMs .hlBackgroundMs').toArray();
    let arr_elt_hierachyTop = arr_elt_hierachyAll.filter(function (elt_curr) {
      return !arr_elt_hierachyMidBtm.includes(elt_curr);
    });
    arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv = $(arr_elt_hierachyTop);

    // #>>> loop + recursion inside each child element
    let det_ReachBottom = false;
    let det_DoneWithBottomReachBackToMiddle = false;
    if (arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv.length !== 0) {
      for (let elt_ChildOfCurrMainElt_curr of arr_elt_ChildOfCurrMainElt_hierachyHorizontalLv) {
        recursiveFindChildEltThatsOverlappedBackgroundColor_applyLineargradient(elt_ChildOfCurrMainElt_curr, arr_elt_hierachyVerticalLv);
        // ;output-draft; sn_DepthLayer_InRecursion--;
      }
      det_DoneWithBottomReachBackToMiddle = true;
    } else {
      det_ReachBottom = true;
    }
    // #>> [assign linear-gradient color to the element] @main;
    //   (DSF -- vertical to bottom -> back to middle -> ...
    if (det_ReachBottom || det_DoneWithBottomReachBackToMiddle) { 
      // ;output-draft; count_BtmLeaf++;
      // ;output-draft; html_ResultAppend += hr_2 
      // ;output-draft; html_ResultAppend += '<h4>'
      // ;output-draft; html_ResultAppend += 'sn_DepthLayer_InRecursion : ' + sn_DepthLayer_InRecursion;
      // ;output-draft; if (det_ReachBottom) {
      // ;output-draft;   html_ResultAppend += '<br>\n' + 'count_BtmLeaf : ' + count_BtmLeaf + ' -- btm reached';
      // ;output-draft; }
      // ;output-draft; html_ResultAppend += '</h4>' + '\n';
      
      
      let css_BackgroundImage = getLinearGradientFromHierachyVerticalLv(arr_elt_hierachyVerticalLv);

      // @TP @messy change opacity should be in css, not here
      // css_BackgroundImage = css_BackgroundImage.replace(/(?<beforeOpacity>rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*)(?<opacity>\d*\.?\d*)(?<afterOpacity>\))/gm, '$<beforeOpacity>0.8$<afterOpacity>');
      
      $(elt_Main).css({ 'background-image' : css_BackgroundImage });
      
      //
      arr_elt_hierachyVerticalLv.pop();
      return;
    }

  }
  
  function getLinearGradientFromHierachyVerticalLv(arr_elt_hierachyVerticalLv) {
    // 
    let sn_DepthOfLeaf = arr_elt_hierachyVerticalLv.length;
    // ;M1; let posInterval_EvenColorStop_IndexBaseColorEnd = 1 / (sn_DepthOfLeaf - 1); // its about the range / index (either +1 or -1)
    // ;M2; let posInterval_EvenColorStop_IndexBaseWhiteEnd = 1 / (sn_DepthOfLeaf + 1);
    // ;M3;
    let posInterval_EvenColorStop_RangeBase = 1 / sn_DepthOfLeaf;
    let posInterval_MarginOfGradientLeftRight = posInterval_EvenColorStop_RangeBase / 6;

    // 'linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%)';
    // @to_use-param
    // let css_BackgroundImage = 'linear-gradient(177deg';
    let css_BackgroundImage = 'linear-gradient(-1deg';

    //
    // let sn_DepthOfLeaf_curr = 0;
    let ind_DepthOfLeaf_curr = -1; // using index, not sn
    for (let elt_hierachyVerticalLv_currRetriveScan of arr_elt_hierachyVerticalLv) {
      ind_DepthOfLeaf_curr++;

      let css_varColorMain_eltMain = $(elt_hierachyVerticalLv_currRetriveScan).css('--color-main');

      // ;M1; css_BackgroundImage += ', ' + css_varColorMain_eltMain + ' ' + (ind_DepthOfLeaf_curr * posInterval_EvenColorStop_IndexBaseColorEnd * 100 + '%');
      // ;M3;
      css_BackgroundImage += ', ' + css_varColorMain_eltMain + ' ' 
        + ((ind_DepthOfLeaf_curr * posInterval_EvenColorStop_RangeBase + posInterval_MarginOfGradientLeftRight) * 100 + '%') + ' ' 
        + (((ind_DepthOfLeaf_curr + 1) * posInterval_EvenColorStop_RangeBase - posInterval_MarginOfGradientLeftRight) * 100 + '%') ;
      // 1 the stops are (say 3 colors)
      // either |-| start 0% + mid 50% + end 100%
      // or |-| white 0% + color1 25% + color2 50% + color3 75% + white 100%
      // or |-| 0% + color1 + 33% + color2 + 66% + color3 + 99%
      // element.style {
      //   background-image: linear-gradient(170deg, rgba(230, 181, 255, 0.5) 5.55556%, rgba(230, 181, 255, 0.5) 27.7778%, rgba(157, 255, 201, 0.5) 38.8889%, rgba(157, 255, 201, 0.5) 61.1111%, rgba(126, 220, 255, 0.5) 72.2222%, rgba(126, 220, 255, 0.5) 94.4444%);
      // }
      
      // this posInterval_EvenColorStop_RangeBase 
      // its not:_ doesnt go to 1 index pos, then move left right
      // its:_  go to 2 index pos, then move right left
      // 
      // [[ 4 index left-bounded, slices into 4 range, with 5 index leftright-bounded == 3 index with no-bounded
      // [[ index can be real index of the range / the middle of the range 
      // 
      // //repeat-from[css]-to[js]
      // diff alg than in js for slicing, here
      // 2 color -> divide by 4 -> pick from 1, jump to 3
      // 3 color -> divide by 6 -> pick from 1, jump to 3, jump to 5

      // ;output-draft; let classCss_eltMain = elt_hierachyVerticalLv_currRetriveScan.getAttribute('class');
      // ;output-draft; html_ResultAppend += css_varColorMain_eltMain + '<br>\n';
      // ;output-draft; html_ResultAppend += classCss_eltMain + '<br>\n';
      // ;output-draft; html_ResultAppend += elt_hierachyVerticalLv_currRetriveScan.outerHTML + '<br>\n';
    }
    // ;output-draft; html_ResultAppend += '<br>\n';

    //
    css_BackgroundImage += ')';

    return css_BackgroundImage;
  }
  

  // ;output-draft; //
  // ;output-draft; document.body.insertAdjacentHTML('beforeend', html_ResultAppend);
  
}

解决方案css [V2-M3]（不推荐）

  • @logic（参见代码注释。想法非常简单（基于上面之前发布的原始想法），但实现很棘手）
/*
@logic::
for all `.hlBackgroundMs` (overlapped) elements
1. 
1.1
store the outer parent element es `var(--color-main)`
1.2
since you cannot directly select the outer parent element, 
you select the hierachy top parent elements first, then 
you select the hierachy top parent elements + hierachy lv2 parent elements, then 
you select the hierachy top parent elements + hierachy lv2 parent elements + hierachy lv3 parent elements, then 
... 
1.3
( 
<strike> ~~// dont worry about:_ there is no overwrite values, each lv preserves the prev lv es `var(--color-main)`
<strike> ~~// and can access the that prev lv es `var(--color-main)`, 
<strike> ~~// <strike> cuz the scope is widen -- 
<strike> ~~// <strike> element in curr lv is also included in the prev lv
<strike> ~~// [[ here, I rt, dont think about elements in Set, imean elements under the parent element scope... ]]
1.
the widen of scope is not a desire effect (it just happens to be it, no other way)
2.
the point is:_ child elements BB inside a parent element AA, can inherit css rules from AA
3.
there is no worry about having css var overwritten (-- as the code shows)
-- imean, 
  even if its a widen scope in the next lv, as long as you dont change that var, it stays there
  -- ( also
  it doesnt matter that `--color-main-hierachylv1` is stored in 
     |-| a narrower scope `.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) {` 
  or |-| a wider scope `.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {`
  as long as you can access to that var (that correct value), its fine.
  )
4.
dont worry about being overselect -- cuz the scope is widen, an element in lv3 would be selected by more widen scope 
4.2
note that, though the scope widen -- it goes into more nested (its amount vs depth) -- (narrower -> wider (shallow -> deep))
  [[
  aga such "select widen" is bit counter-intuitive
  the mixture of how css file scan apply & element focus & inherit & css selector limitation make this messy 

  normally idealy, should be either following:
  1.
    -
      select lower scopes (sum of all lower layers) + deeper
      so sth like
      .hlBackgroundMs {
        --color-main-hierachylv1: var(--color-main);
      }
      .hlBackgroundMs .hlBackgroundMs {
        --color-main-hierachylv2: var(--color-main);
      }
    -
      but this will overwrite the prev scope es `--color-main-hierachylv1`

      dont think of:_ 
      the css file apply the rules "once" (like, just scan&apply the css file once), and below rules overwrite the above rule

      should think of:_ 
      first focus on an element, then check its class, then check the css rule -- then scan&apply from that position 

    - eg:
      you may think of:_
      .hlBackgroundMs {
        --color-main-hierachylv1: var(--color-main);
      }
      applied once to all elements, done, 

      .hlBackgroundMs .hlBackgroundMs {
        --color-main-hierachylv2: var(--color-main);
      }
      applied once to all lv2+ elements
      -- lv2 eleemnts get rules assigned from here to below 
      -- `.hlBackgroundMs {` wont be exec to lv2 elements -- cuz its already executed once
      ->
      that is wrong
      -- `.hlBackgroundMs {` also applies to lv2+ elements 
      -- this overrides the inherited `--color-main-hierachylv1` from parent element 
        [[note: override inherited, not overwrite itself-already-has -- said, the rules is about inherit from parent element, not inherit from prev self / left exist (globalish?<) css rule [[or sth like that, cc...]]]]
        [[ dk, miss, or sufficient, logic-flow, the best self logic emmm 
        not just side effect, conflict, concrete solid concept, compare 
        dk ..
        [[ ((aga, css rule, file once, element multi, inherit, self / prev apply / left exist
  2. 
    select each scope (individually, at its own layer) + deeper 
    - css selector limitation -- you cannot just simply select parent element
  ]]

so, `--color-main-hierachylv6` is actually color value of elements nested deeply, 
its not for wider elements
though, the elements in wider scope does get assigned with `--color-main-hierachylv6: var(--color-main);` 
they will not use it

this is guaranteed in the "reverse order (wider -> narrower when assign lineargradient css rule)"
the `--color-main-hierachylv6: var(--color-main);` in wider scope css rule will be overwritten by narrower scope css rule
(and the further narrower scope css rule will not apply -- simply cuz this element is not that must nested)
)

2.
2.1
since the scope is widen, 
you cannot directly apply css rule while assigning `var(--color-main)`
-> otherwise, you will overwrite all the css rule in prev narrower scope with the css rule in the wider scope 
-- results in a undesired-long `linear-gradient` with blank `--color-main-hierachylv6`

->
so, you need to separate out the css rules, and
apply the rules in reverse order (wider -> narrower when assign lineargradient css rule)

2.2
(note, now you are in reversed order -> prev scope is wider, not narrower)

:not(.dummyPriorityClassNonexist)
is to increase the css rule priority in narrower scope, 
since the prev wider scope has higher priority, due to more classes in `:not(`
even though the curr narrower scope is written below it

*/


/* narrower -> wider (shallow -> deep) when store css var var(--color-main)  */
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 */
  --color-main-hierachylv2: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 + hierachy lv3 */
  --color-main-hierachylv3: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv4: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv5: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv6: var(--color-main);
}
/* wider -> narrower (deep -> shallow) when assign lineargradient css rule */
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist) {
  --lineargradient-deg: -1deg;
  /* ;not_need; background: initial; */ /* seems require, otherwise background-color coexist; dk, but actually, not remove makes look more obvious (better) */
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(8.33% - 8%) calc(8.33% + 8%), var(--color-main-hierachylv2) calc(25% - 8%) calc(25% + 8%), var(--color-main-hierachylv3) calc(41.66% - 8%) calc(41.66% + 8%), var(--color-main-hierachylv4) calc(58.33% - 8%) calc(58.33% + 8%), var(--color-main-hierachylv5) calc(75% - 8%) calc(75% + 8%), var(--color-main-hierachylv6) calc(91.66% - 8%) calc(91.66% + 8%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(10% - 10%) calc(10% + 10%), var(--color-main-hierachylv2) calc(30% - 10%) calc(30% + 10%), var(--color-main-hierachylv3) calc(50% - 10%) calc(50% + 10%), var(--color-main-hierachylv4) calc(70% - 10%) calc(70% + 10%), var(--color-main-hierachylv5) calc(90% - 10%) calc(90% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist):not(.dummyPriorityClassNonexist) {
  /* ;not_need; background-image: unset; */
  background-color: var(--color-main-hierachylv1);
}

解决方案css [V2-M4]（推荐）

.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --lineargradient-deg: -1deg;
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs)) { /* hierachy lv2 */
  --color-main-hierachylv2: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) { /* hierachy lv3 */
  --color-main-hierachylv3: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv4: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv5: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(10% - 10%) calc(10% + 10%), var(--color-main-hierachylv2) calc(30% - 10%) calc(30% + 10%), var(--color-main-hierachylv3) calc(50% - 10%) calc(50% + 10%), var(--color-main-hierachylv4) calc(70% - 10%) calc(70% + 10%), var(--color-main-hierachylv5) calc(90% - 10%) calc(90% + 10%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs):not(.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs)) {
  --color-main-hierachylv6: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(8.33% - 8%) calc(8.33% + 8%), var(--color-main-hierachylv2) calc(25% - 8%) calc(25% + 8%), var(--color-main-hierachylv3) calc(41.66% - 8%) calc(41.66% + 8%), var(--color-main-hierachylv4) calc(58.33% - 8%) calc(58.33% + 8%), var(--color-main-hierachylv5) calc(75% - 8%) calc(75% + 8%), var(--color-main-hierachylv6) calc(91.66% - 8%) calc(91.66% + 8%));
}

解决方案CSS [V2-M5]

.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs) { /* hierachy top -- the .hlBackgroundMs elements that are at the top -- not nest inside any other .hlBackgroundMs */
  --color-main-hierachylv1: var(--color-main);
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 */
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(25% - 20%) calc(25% + 20%), var(--color-main-hierachylv2) calc(75% - 20%) calc(75% + 20%));

}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) { /* hierachy top + hierachy lv2 + hierachy lv3 */
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: inherit;
  --color-main-hierachylv3: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(16.66% - 15%) calc(16.66% + 15%), var(--color-main-hierachylv2) calc(50% - 15%) calc(50% + 15%), var(--color-main-hierachylv3) calc(83.33% - 15%) calc(83.33% + 15%));
}
.hlBackgroundMs:not(.hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs .hlBackgroundMs) {
  --color-main-hierachylv1: inherit;
  --color-main-hierachylv2: inherit;
  --color-main-hierachylv3: inherit;
  --color-main-hierachylv4: var(--color-main);
  background-image: linear-gradient(var(--lineargradient-deg), var(--color-main-hierachylv1) calc(12.5% - 10%) calc(12.5% + 10%), var(--color-main-hierachylv2) calc(37.5% - 10%) calc(37.5% + 10%), var(--color-main-hierachylv3) calc(62.5% - 10%) calc(62.5% + 10%), var(--color-main-hierachylv4) calc(87.5% - 10%) calc(87.5% + 10%));
}

// omitted due to Stackoverflow length restriction
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.