background-color 相关问题

鉴于情况 1. 假设我有 2 个跨度，都有背景颜色，并且一个在另一个跨度内（重叠）：阿尔法贝塔鉴于情况 1 . 假设我有 2 个跨度，都带有 background-color，并且一个在另一个跨度内（重叠）： Alpha Beta Gamma Delta Epsilon Eta span.highlightYellow { background-color: rgba(255, 237, 0, 0.5); } span.highlightTopic { background-color: rgba(182, 203, 232, 0.5); } 2. 它们重叠，但我希望能够看到两者background-color，所以我申请了 opacity（已应用，见上文） 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%); } 3. html 输出： jsfiddle：脚本问题 4. 现在假设有超过 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%); } => 5. 那么，如何将 linear-gradient css 应用于通常任何 2 彼此具有 background-color 重叠的跨度？（没有指定它们的 45 种不同组合。）您可以为任何跨度提供一门课程并为他们提供样式解决方案（解决方法） jsfiddle：突出显示背景颜色重叠（soln） 1 . 你需要一个Master class（CSS样式规则） span.hlBackgroundMs { --color-main: aliceblue; background-color: var(--color-main); } 2. 向每个元素添加额外的 Master class Linux 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%); } 限制和注意事项:: 这可能仅适用于 2 种颜色 p > span.hlBackgroundMs 用于选取outer span，仅限于某些情况（注意：如果您的浏览器支持span.hlBackgroundMs:has(> span.hlBackgroundMs)，:has()可能会更好）更多嵌套（lv 3+）span可能不起作用逻辑不太好理解（可能有更好的方法）你可以只使用透明度为 0 的 alpha（为了简化工作）纯CSS（你也可以使用js来实现）思考过程:: 重点是：_ 能够从 (parent) outer span 和 (child) inner span 中选择颜色选择 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%); } 更新：之前更新的CSS规则非常糟糕添加 4 个解决方案：1 个在 Javascript 中，3 个在（纯）Css 中最初的思考过程是以下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::（直接）在每个 .hlBackgroundMs 元素内循环将所有上一个父元素的background-color存储在同一（垂直）分支中将 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 <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 += ' \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 + ' \n'; // ;output-draft; html_ResultAppend += classCss_eltMain + ' \n'; // ;output-draft; html_ResultAppend += elt_hierachyVerticalLv_currRetriveScan.outerHTML + ' \n'; } // ;output-draft; html_ResultAppend += ' \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

html css background-color

回答 2 投票 0

创建divider View在android中显示不好

我正在创建一个布局，并通过视图放置分隔线。但两个分隔线看起来不一样。其所有属性都相同。仔细看看截图：第一个看起来不错...

android android-layout background-color

回答 4 投票 0

获取android中按钮的背景颜色

如何获取按钮的背景颜色。在 xml 中，我使用 ---- android:background = XXXXX 设置背景颜色现在在活动类中我如何检索它具有的值？

android button background-color

回答 8 投票 0

为什么在内联 CSS 格式中字体颜色不可见？

我本以为会看到白色字体，但一切都是蓝色的。为什么会出现这种情况？你好世界！我本来希望看到白色字体，但一切都是蓝色的。为什么会出现这种情况？ Hello, World! 我尝试在 Liveweave 网站上运行此程序。 sera que quieres algo como esto style =“颜色：rgba（255,255,225）;背景颜色：rgba（0,0,255,1.0）;”

html css background-color

回答 1 投票 0

如何编写 Material-UI TextField 组件以使背景颜色不会溢出边框？

我一直在尝试设置 Material-UI TextField 的样式，以在用户悬停或组件聚焦时具有背景颜色。我的组件代码是：从“反应”导入反应；导入

css material-ui border textfield background-color

回答 1 投票 0

使用CSS动态改变颜色，这样背景和文本颜色就不会冲突

我面临的问题是，用户可以更改 HTML 组件的背景颜色，这有时会与他们无法更改的文本颜色发生冲突（或者更一般地说，背景和文本颜色是

html css colors background-color

回答 1 投票 0

如何在每天午夜而不是通过用户事件更改班级的背景颜色

目前我有一段代码每24小时更改一个类的背景颜色。然而，如果用户刷新页面，24 小时周期会从头开始 – 所以他们只会...