如何将线性渐变css应用于任何2个背景色相互重叠的跨度？

cxfofazt  于 2023-01-10  发布在  其他
关注(0)|答案(2)|浏览(206)

给定情况

一、
假设我有两个跨距，都是background-color，并且一个跨距在另一个跨距内部（重叠）：

<p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p>
span.highlightYellow {
  background-color: rgba(255, 237, 0, 0.5);
}

span.highlightTopic {
  background-color: rgba(182, 203, 232, 0.5);
}

二、
它们是重叠的，但我希望能够同时看到两个background-color，因此我应用

  1. opacity（已应用，见上文）
  2. linear-gradient（参见下文）
    对于重叠的background-color
span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

三、
html输出：

jsfiddle: script

问题

四、
现在，假设有多于2个跨度，假设有10个跨度。
那么对于它们的每一个组合，我的css风格的数量将是45（$$10：nCr：2 =\sum_{n = 1} ^{10 - 1} n = 45 $$）。
我需要45个这个

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

=〉
五、
那么，如何将linear-gradient css应用于通常任何2跨度，这些跨度具有background-color相互重叠？（没有指定它们的45种不同组合。）

css

2条答案

按热度按时间
qvtsj1bj

qvtsj1bj1#

可以为任何范围给予一个类并指定样式

赞(0）分享  回复(0）举报  2023-01-10
6jygbczu

6jygbczu2#

解决方案（变通方案）：

jsfiddle: Highlight Background color Overlap (soln)
一、
您需要一个Master class（CSS样式规则）

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

二、
将额外的Master class添加到每个元素

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

三、
三、1
将变量--color-main添加到Master class中;
三、二
并使用--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); */
}

四、
四.1
选择outer span的颜色并将其分配给--color-main-outerspan
四、二
使用var(--color-main) & var(--color-main-outerspan)将2种颜色指定给linear-gradient

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种颜色

  • p > span.hlBackgroundMs用于选取outer span，这仅限于某些情况
  • （注意：如果您的浏览器支持:has()，span.hlBackgroundMs:has(> span.hlBackgroundMs)可能更好）
  • 更多嵌套的（lv3+）span可能无法工作
  • 逻辑不容易遵循（可能有更好的方法）
  • 你可以只使用一个透明度为0的alpha（为了简化工作）
  • 纯css（你也可以用js来实现）

思考过程：

整个目的是：_
1.能够从(parent) outer span和(child) inner span中挑选颜色
1.选择inner span，然后将这2种颜色分配给其中的linear-gradient。
=〉

  • 能够从旁边（内/外范围的）CSS样式规则中选择颜色
  • 〉您需要使用变量--color-main
  • 以便能够与Css样式规则一起使用diff共享变量
  • （例如：highlightContentObject和highlightTechStack之间的份额），
  • 〉您需要为该元素使用一个额外的Master类span.hlBackgroundMs（用于存储和共享变量--color-main）
  • 为了能够区分2个diff颜色（而不是一直只挑选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规则是相当糟糕
1.再添加4种溶液：1个使用Javascript，3个使用（纯）Css
1.原始思维过程是以下三种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]

1.@logic：：（直截了当）
1.每个.hlBackgroundMs元素内的循环
1.将来自所有先前父元素的background-color存储在同一（垂直）分支中
1.使用background-color为每个元素分配linear-gradient css规则

  • @备注：
  • 您可能需要更改代码中的某些参数，以适应您自己的情况，尤其是.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_InRecurssion = 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 + recurssion 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_InRecurssion++;
    
    // #>>> 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 + recurssion 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_InRecurssion--;
      }
      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_InRecurssion : ' + sn_DepthLayer_InRecurssion;
      // ;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（参见代码注解。idea相当直接（基于上面发布的原始思想），但实现起来很棘手）
/*
@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
赞(0）分享  回复(0）举报  2023-01-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com