Overlap two background-color with javascript.

huangapple
go评论98阅读模式
英文:

Overlap two background-color with javascript

问题

你可以使用 JavaScript 的以下代码实现你想要的效果：

  1. var teamAElements = document.getElementsByClassName('teamA');
  2. var teamBElements = document.getElementsByClassName('teamB');
  4. for (var i = 0; i < teamAElements.length; i++) {
  5.     teamAElements[i].style.backgroundColor = "rgba(0, 0, 255, 0.3)";
  6. }
  8. for (var i = 0; i < teamBElements.length; i++) {
  9.     teamBElements[i].style.backgroundColor = "rgba(255, 0, 0, 0.3)";
  10. }

这样，具有 'teamA' 和 'teamB' 类的 div 元素将分别设置为对应的颜色。

英文:

Can i overlap two background-colors?

I'm coding div tags for two team, one is teamA the other is teamB.
Each div is for each member.

  1. document.getElementsByClassName(&#39;teamA&#39;).style.backgroundColor = &quot;rgba(0, 0, 255, 0.3)&quot;;
  3. document.getElementsByClassName(&#39;teamB&#39;).style.backgroundColor = &quot;rgba(255, 0, 0, 0.3)&quot;;

The result i want is, a div class(user) in which both 'teamA' and 'teamB' belong, is a mixture of two colors(mixture of teamA and teamB color).

How can i do with javascript?

答案1

得分: 2

你可以使用单独的类和linear-gradient为两个团队的用户。

英文:

> You can use separate classes and linear-gradient for both teams users

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .user{
  2.   width:200px;
  3.   height:100px;
  4.   border:1px solid lightgrey;
  5.   padding:10px;
  6.   margin:10px;
  7. }
  10. .teamA{
  11.   background-color:rgba(0, 0, 255, 0.3);
  12. }
  14. .teamB{
  15.   background-color:rgba(255, 0, 0, 0.3);
  16. }
  18. .teamAB{
  19.   background:linear-gradient(to left,rgba(255, 0, 0, 0.3),rgba(0, 0, 255, 0.3));
  20. }

<!-- language: lang-html -->

  1. &lt;div class=&#39;user teamA&#39;&gt;
  2.   I am in Team A
  3. &lt;/div&gt;
  5. &lt;div class=&#39;teamB user&#39;&gt;
  6.   I am in Team B
  7. &lt;/div&gt;
  9. &lt;div class=&#39;user teamAB&#39;&gt;
  10.   I am in Team A,B
  11. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

以下是您要翻译的内容：

"One approach is below, though this answer may need revising should you update the question. At this point, though, I feel it answers your question; explanatory comments are in the code to explain what's happening and there are references at the end to aid in further research.

Please note that one method I use in this answer is to use the color-mix() function which is – at the time of writing – a very new feature, you may wish to look at the compatibility table for that function (it's on the reference linked in the references, below) and it may not work, or it may appear to do nothing in your current browser (use the developer tools to inspect the element if so):

  1. /* defining shared variables here, in the "global" context: */
  2. :root {
  3.   --spacing: 0.5rem;
  4.   --teamA: rgb(0 0 255 / 0.3);
  5.   --teamB: rgb(255 0 0 / 0.3);
  6. }
  8. /* resetting default margins and padding to 0 (zero), and
  9.    explicitly forcing the browser to use the same sizing
  10.    algorithm, "border-box," to ensure that padding and
  11.    border-sizes are included within the declared element
  12.    size: */
  13. *,
  14. ::before,
  15. ::after {
  16.   box-sizing: border-box;
  17.   margin: 0;
  18.   padding: 0;
  19. }
  21. body {
  22.   /* ensuring that the <body> element takes the full height
  23.      of the viewport: */
  24.   block-size: 100vh;
  25.   /* applying padding to the element on the 'block' axis,
  26.      the axis on which block content is placed, the vertical
  27.      axis in English, and other European languages: */
  28.   padding-block: var(--spacing);
  29. }
  31. main {
  32.   /* setting the <main> element to take 100% of the available
  33.      space on the block axis: */
  34.   block-size: 100%;
  35.   /* using CSS grid layout: */
  36.   display: grid;
  37.   /* setting a gap between adjacent grid-items, whether on the
  38.      block, or inline, axes: */
  39.   gap: var(--spacing);
  40.   /* using the repeat() function to create 3 grid-columns, each
  41.      taking 1 fraction of the available space: */
  42.   grid-template-columns: repeat(3, 1fr);
  43.   /* setting the size of the element on the inline axis, the axis
  44.      on which inline content (such as text) is placed, so the
  45.      horizontal axis (in English, and European languages) and is
  46.      equivalent to declaring "width" in those locales; the clamp()
  47.      function defines a 50% size, with a minimum size of
  48.      20rem, and an upper limit of 900px: */
  49.   inline-size: clamp(20rem, 50%, 900px);
  50.   /* setting an auto margin on the inline axis, in order to center
  51.      the <main> element on that axis: */
  52.   margin-inline: auto;
  53.   padding: var(--spacing);
  54. }
  56. main > * {
  57.   /* setting a 2px border on the grid-items (the children of
  58.      the <main> element: */
  59.   border: 2px solid hsl(300deg 90% 80% / 0.9);
  60.   /* an inset box-shadow to create an "inner-border" to
  61.      differentiate the element border from the background-color: */
  62.   box-shadow: inset 0 0 0 0.2rem #fff;
  63.   text-align: center;
  64. }
  66. main * {
  67.   /* all descendants of the <main> element have a padding
  68.      determined by the --spacing custom property: */
  69.   padding: var(--spacing);
  70. }
  72. .explainer {
  73.   /* flex layout: */
  74.   display: flex;
  75.   /* the children of the element will be laid out in
  76.      columns: */
  77.   flex-direction: column;
  78.   /* again, this sets the gap between adjacent elements: */
  79.   gap: var(--spacing);
  80.   /* this element will span 3 grid-columns: */
  81.   grid-column: span 3;
  82.   /* and the content is centered on the flow-axis (the axis
  83.      on which the flex-content is laid out): */
  84.   justify-content: center;
  85. }
  87. .teamA {
  88.   /* setting the --color custom property to the value
  89.      set by the --teamA custom property: */
  90.   --color: var(--teamA);
  91. }
  93. .teamB {
  94.   /* as above, for --teamB: */
  95.   --color: var(--teamB);
  96. }
  98. span {
  99.   /* styling the background-color of all <span> elements to
  100.      the value of the --color custom-property or - if that
  101.      custom-property is invalid/undefined - to transparent: */
  102.   background-color: var(--color, transparent);
  103. }
  105. .gradientMix {
  106.   /* using a linear-gradient: */
  107.   background-image: linear-gradient(
  108.     /* the gradient is at 90 degrees: */
  109.     90deg,
  110.     /* the first color is the value of --teamA: */
  111.     var(--teamA),
  112.     /* and transitions over the element's size
  113.        to the value of --teamB: */
  114.     var(--teamB)
  115.   );
  116. }
  118. .gradientStoppedMix {
  119.   /* using a linear-gradient, again: */
  120.   background-image: linear-gradient(
  121.     90deg,
  122.     /* again starting with the value of --teamA,
  123.        but this color starts at 0 and runs until
  124.        50% of the available space: */
  125.     var(--teamA) 0 50%,
  126.     /* the color held in --teamB starts at 50%,
  127.        and continues; using these color-stops
  128.        means that we can place hard edges on the
  129.        gradient, rather than smooth transitions: */
  130.     var(--teamB) 50%
  131.   );
  132. }
  134. .colorMix {
  135.   /* here we use the (new, at the time of writing) color-mix()
  136.      function to mix two colors together: */
  137.   background-color: color-mix(
  138.     /* we're using the srgb color space: */
  139.     in srgb,
  140.     /* unfortunately (at least in Firefox) we can't (yet) use
  141.        custom properties in color-mix(), so instead I've had
  142.        to hard-code --teamB's value, which is mixed at 50% */
  143.     rgb(255 0 0 / 0.3) 50%,
  144.     /* into the "base" color, again hard-coding --teamA's value: */
  145.     rgb(0 0 255 / 0.3));
  146. }
  148. code {
  149.   background-color: #eee;
  150.   display: block;
  151.   font-family: monospace;
  152. }
  1. <main>
  2.   <div class="explainer">
  3.     Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA), var(--teamB))</code>
  4.   </div>
  5.   <span class="teamA">Team A</span>
  6.   <span class="teamB">Team B</span>
  7.   <span class="mixed gradientMix">Team A + Team B</span>
  8.   <div class="explainer">
  9.     Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA) 0 50%, var(--teamB) 50%)</code>
  10.   </
  12. <details>
  13. <summary>英文:</summary>
  15. One approach is below, though this answer may need revising should you update the question. At this point, though, I feel it answers your question; explanatory comments are in the code to explain what&#39;s happening and there are references at the end to aid in further research.
  17. Please note that one method I use in this answer is to use the `color-mix()` function which is &amp;ndash; at the time of writing &amp;ndash; a very new feature, you may wish to look at the compatibility table for that function (it&#39;s on the reference linked in the references, below) and it may not work, or it may appear to do nothing in your current browser (use the developer tools to inspect the element if so):
  19. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  21. &lt;!-- language: lang-css --&gt;
  23.     /* defining shared variables here, in the &quot;global&quot; context: */
  24.     :root {
  25.       --spacing: 0.5rem;
  26.       --teamA: rgb(0 0 255 / 0.3);
  27.       --teamB: rgb(255 0 0 / 0.3);
  28.     }
  30.     /* resetting default margins and padding to 0 (zero), and
  31.        explicitly forcing the browser to use the same sizing
  32.        algorithm, &quot;border-box,&quot; to ensure that padding and
  33.        border-sizes are included within the declared element
  34.        size: */
  35.     *,
  36.     ::before,
  37.     ::after {
  38.       box-sizing: border-box;
  39.       margin: 0;
  40.       padding: 0;
  41.     }
  43.     body {
  44.       /* ensuring that the &lt;body&gt; element takes the full height
  45.          of the viewport: */
  46.       block-size: 100vh;
  47.       /* applying padding to the element on the &#39;block&#39; axis,
  48.          the axis on which block content is placed, the vertical
  49.          axis in English, and other European languages: */
  50.       padding-block: var(--spacing);
  51.     }
  53.     main {
  54.       /* setting the &lt;main&gt; element to take 100% of the available
  55.          space on the block axis: */
  56.       block-size: 100%;
  57.       /* using CSS grid layout: */
  58.       display: grid;
  59.       /* setting a gap between adjacent grid-items, whether on the
  60.          block, or inline, axes: */
  61.       gap: var(--spacing);
  62.       /* using the repeat() function to create 3 grid-columns, each
  63.          taking 1 fraction of the available space: */
  64.       grid-template-columns: repeat(3, 1fr);
  65.       /* setting the size of the element on the inline axis, the axis
  66.          on which inline content (such as text) is placed, so the
  67.          horizontal axis (in English, and European languages) and is
  68.          equivalent to declaring &quot;width&quot; in those locales; the clamp()
  69.          function defines a 50% size, with a minimum size of
  70.          20rem, and an upper limit of 900px: */
  71.       inline-size: clamp(20rem, 50%, 900px);
  72.       /* setting an auto margin on the inline axis, in order to center
  73.          the &lt;main&gt; element on that axis: */
  74.       margin-inline: auto;
  75.       padding: var(--spacing);
  76.     }
  78.     main &gt; * {
  79.       /* setting a 2px border on the grid-items (the children of
  80.          the &lt;main&gt; element: */
  81.       border: 2px solid hsl(300deg 90% 80% / 0.9);
  82.       /* an inset box-shadow to create an &quot;inner-border&quot; to
  83.          differentiate the element border from the background-color: */
  84.       box-shadow: inset 0 0 0 0.2rem #fff;
  85.       text-align: center;
  86.     }
  88.     main * {
  89.       /* all descendants of the &lt;main&gt; element have a padding
  90.          determined by the --spacing custom property: */
  91.       padding: var(--spacing);
  92.     }
  94.     .explainer {
  95.       /* flex layout: */
  96.       display: flex;
  97.       /* the children of the element will be laid out in
  98.          columns: */
  99.       flex-direction: column;
  100.       /* again, this sets the gap between adjacent elements: */
  101.       gap: var(--spacing);
  102.       /* this element will span 3 grid-columns: */
  103.       grid-column: span 3;
  104.       /* and the content is centered on the flow-axis (the axis
  105.          on which the flex-content is laid out): */
  106.       justify-content: center;
  107.     }
  109.     .teamA {
  110.       /* setting the --color custom property to the value
  111.          set by the --teamA custom property: */
  112.       --color: var(--teamA);
  113.     }
  115.     .teamB {
  116.       /* as above, for --teamB: */
  117.       --color: var(--teamB);
  118.     }
  120.     span {
  121.       /* styling the background-color of all &lt;span&gt; elements to
  122.          the value of the --color custom-property or - if that
  123.          custom-property is invalid/undefined - to transparent: */
  124.       background-color: var(--color, transparent);
  125.     }
  127.     .gradientMix {
  128.       /* using a linear-gradient: */
  129.       background-image: linear-gradient(
  130.         /* the gradient is at 90 degrees: */
  131.         90deg,
  132.         /* the first color is the value of --teamA: */
  133.         var(--teamA),
  134.         /* and transitions over the element&#39;s size
  135.            to the value of --teamB: */
  136.         var(--teamB)
  137.       );
  138.     }
  140.     .gradientStoppedMix {
  141.       /* using a linear-gradient, again: */
  142.       background-image: linear-gradient(
  143.         90deg,
  144.         /* again starting with the value of --teamA,
  145.            but this color starts at 0 and runs until
  146.            50% of the available space: */
  147.         var(--teamA) 0 50%,
  148.         /* the color held in --teamB starts at 50%,
  149.            and continues; using these color-stops
  150.            means that we can place hard edges on the
  151.            gradient, rather than smooth transitions: */
  152.         var(--teamB) 50%
  153.       );
  154.     }
  156.     .colorMix {
  157.       /* here we use the (new, at the time of writing) color-mix()
  158.          function to mix two colors together: */
  159.       background-color: color-mix(
  160.         /* we&#39;re using the srgb color space: */
  161.         in srgb,
  162.         /* unfortunately (at least in Firefox) we can&#39;t (yet) use
  163.            custom properties in color-mix(), so instead I&#39;ve had
  164.            to hard-code --teamB&#39;s value, which is mixed at 50% */
  165.         rgb(255 0 0 / 0.3) 50%,
  166.         /* into the &quot;base&quot; color, again hard-coding --teamA&#39;s value: */
  167.         rgb(0 0 255 / 0.3));
  168.     }
  170.     code {
  171.       background-color: #eee;
  172.       display: block;
  173.       font-family: monospace;
  174.     }
  176. &lt;!-- language: lang-html --&gt;
  178.     &lt;main&gt;
  179.       &lt;div class=&quot;explainer&quot;&gt;
  180.         Using CSS linear-gradient: &lt;code&gt;linear-gradient(90deg, var(--teamA), var(--teamB))&lt;/code&gt;
  181.       &lt;/div&gt;
  182.       &lt;span class=&quot;teamA&quot;&gt;Team A&lt;/span&gt;
  183.       &lt;span class=&quot;teamB&quot;&gt;Team B&lt;/span&gt;
  184.       &lt;span class=&quot;mixed gradientMix&quot;&gt;Team A + Team B&lt;/span&gt;
  185.       &lt;div class=&quot;explainer&quot;&gt;
  186.         Using CSS linear-gradient: &lt;code&gt;linear-gradient(90deg, var(--teamA) 0 50%, var(--teamB) 50%)&lt;/code&gt;
  187.       &lt;/div&gt;
  188.       &lt;span class=&quot;teamA&quot;&gt;Team A&lt;/span&gt;
  189.       &lt;span class=&quot;teamB&quot;&gt;Team B&lt;/span&gt;
  190.       &lt;span class=&quot;mixed gradientStoppedMix&quot;&gt;Team A + Team B&lt;/span&gt;
  191.       &lt;div class=&quot;explainer&quot;&gt;
  192.         Using CSS color-mix: &lt;code&gt;color-mix(in srgb, rgb(0 0 255 / 0.3) 50%, rgb(255 0 0 / 0.3))&lt;/code&gt;
  193.       &lt;/div&gt;
  194.       &lt;span class=&quot;teamA&quot;&gt;Team A&lt;/span&gt;
  195.       &lt;span class=&quot;teamB&quot;&gt;Team B&lt;/span&gt;
  196.       &lt;span class=&quot;mixed colorMix&quot;&gt;Team A + Team B&lt;/span&gt;
  197.     &lt;/main&gt;
  199. &lt;!-- end snippet --&gt;
  201. [JS Fiddle demo](https://jsfiddle.net/davidThomas/kpbLcehf/1/).
  203. References:
  205. * [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color).
  206. * [`block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).
  207. * [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
  208. * [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
  209. * [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp).
  210. * [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix).
  211. * [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
  212. * [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties).
  213. * [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
  214. * [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
  215. * [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
  216. * [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).
  217. * [`gap()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
  218. * [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
  219. * [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
  220. * [`inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size).
  221. * [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
  222. * [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).
  223. * [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
  224. * [`margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline).
  225. * [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
  226. * [`padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block).
  227. * [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline).
  228. * [`place-contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-contents).
  229. * [`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
  230. * [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
  232. </details>

huangapple
  • 本文由 发表于 2023年5月7日 00:00:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76189848.html
  • css
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定