Overlap two background-color with javascript

Question

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.

document.getElementsByClassName('teamA').style.backgroundColor = "rgba(0, 0, 255, 0.3)";

document.getElementsByClassName('teamB').style.backgroundColor = "rgba(255, 0, 0, 0.3)";

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?

Not sure what you're expecting the UI to look like, but it sounds like you're asking for a gradient: https://stackoverflow.com/q/66598665/519413 — Rory McCrossan, May 06 '23 at 16:19
How should it be "mixed"? Half one colour, and half the other? A gradient from one to the other? The "average colour" of both (if so, please explain how you'd expect the "average" to be calculated/shown)? — David Thomas, May 06 '23 at 16:31

score 2 · Answer 1 · answered May 06 '23 at 16:37

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

.user{
  width:200px;
  height:100px;
  border:1px solid lightgrey;
  padding:10px;
  margin:10px;
}


.teamA{
  background-color:rgba(0, 0, 255, 0.3);
}

.teamB{
  background-color:rgba(255, 0, 0, 0.3);
}

.teamAB{
  background:linear-gradient(to left,rgba(255, 0, 0, 0.3),rgba(0, 0, 255, 0.3));
}

<div class='user teamA'>
  I am in Team A
</div>

<div class='teamB user'>
  I am in Team B
</div>

<div class='user teamAB'>
  I am in Team A,B
</div>

score 1 · Answer 2 · answered May 06 '23 at 17:36

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):

/* defining shared variables here, in the "global" context: */
:root {
  --spacing: 0.5rem;
  --teamA: rgb(0 0 255 / 0.3);
  --teamB: rgb(255 0 0 / 0.3);
}

/* resetting default margins and padding to 0 (zero), and
   explicitly forcing the browser to use the same sizing
   algorithm, "border-box," to ensure that padding and
   border-sizes are included within the declared element
   size: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* ensuring that the <body> element takes the full height
     of the viewport: */
  block-size: 100vh;
  /* applying padding to the element on the 'block' axis,
     the axis on which block content is placed, the vertical
     axis in English, and other European languages: */
  padding-block: var(--spacing);
}

main {
  /* setting the <main> element to take 100% of the available
     space on the block axis: */
  block-size: 100%;
  /* using CSS grid layout: */
  display: grid;
  /* setting a gap between adjacent grid-items, whether on the
     block, or inline, axes: */
  gap: var(--spacing);
  /* using the repeat() function to create 3 grid-columns, each
     taking 1 fraction of the available space: */
  grid-template-columns: repeat(3, 1fr);
  /* setting the size of the element on the inline axis, the axis
     on which inline content (such as text) is placed, so the
     horizontal axis (in English, and European languages) and is
     equivalent to declaring "width" in those locales; the clamp()
     function defines a 50% size, with a minimum size of
     20rem, and an upper limit of 900px: */
  inline-size: clamp(20rem, 50%, 900px);
  /* setting an auto margin on the inline axis, in order to center
     the <main> element on that axis: */
  margin-inline: auto;
  padding: var(--spacing);
}

main > * {
  /* setting a 2px border on the grid-items (the children of
     the <main> element: */
  border: 2px solid hsl(300deg 90% 80% / 0.9);
  /* an inset box-shadow to create an "inner-border" to
     differentiate the element border from the background-color: */
  box-shadow: inset 0 0 0 0.2rem #fff;
  text-align: center;
}

main * {
  /* all descendants of the <main> element have a padding
     determined by the --spacing custom property: */
  padding: var(--spacing);
}

.explainer {
  /* flex layout: */
  display: flex;
  /* the children of the element will be laid out in
     columns: */
  flex-direction: column;
  /* again, this sets the gap between adjacent elements: */
  gap: var(--spacing);
  /* this element will span 3 grid-columns: */
  grid-column: span 3;
  /* and the content is centered on the flow-axis (the axis
     on which the flex-content is laid out): */
  justify-content: center;
}

.teamA {
  /* setting the --color custom property to the value
     set by the --teamA custom property: */
  --color: var(--teamA);
}

.teamB {
  /* as above, for --teamB: */
  --color: var(--teamB);
}

span {
  /* styling the background-color of all <span> elements to
     the value of the --color custom-property or - if that
     custom-property is invalid/undefined - to transparent: */
  background-color: var(--color, transparent);
}

.gradientMix {
  /* using a linear-gradient: */
  background-image: linear-gradient(
    /* the gradient is at 90 degrees: */
    90deg,
    /* the first color is the value of --teamA: */
    var(--teamA),
    /* and transitions over the element's size
       to the value of --teamB: */
    var(--teamB)
  );
}

.gradientStoppedMix {
  /* using a linear-gradient, again: */
  background-image: linear-gradient(
    90deg,
    /* again starting with the value of --teamA,
       but this color starts at 0 and runs until
       50% of the available space: */
    var(--teamA) 0 50%,
    /* the color held in --teamB starts at 50%,
       and continues; using these color-stops
       means that we can place hard edges on the
       gradient, rather than smooth transitions: */
    var(--teamB) 50%
  );
}

.colorMix {
  /* here we use the (new, at the time of writing) color-mix()
     function to mix two colors together: */
  background-color: color-mix(
    /* we're using the srgb color space: */
    in srgb,
    /* unfortunately (at least in Firefox) we can't (yet) use
       custom properties in color-mix(), so instead I've had
       to hard-code --teamB's value, which is mixed at 50% */
    rgb(255 0 0 / 0.3) 50%,
    /* into the "base" color, again hard-coding --teamA's value: */
    rgb(0 0 255 / 0.3));
}

code {
  background-color: #eee;
  display: block;
  font-family: monospace;
}

<main>
  <div class="explainer">
    Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA), var(--teamB))</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed gradientMix">Team A + Team B</span>
  <div class="explainer">
    Using CSS linear-gradient: <code>linear-gradient(90deg, var(--teamA) 0 50%, var(--teamB) 50%)</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed gradientStoppedMix">Team A + Team B</span>
  <div class="explainer">
    Using CSS color-mix: <code>color-mix(in srgb, rgb(0 0 255 / 0.3) 50%, rgb(255 0 0 / 0.3))</code>
  </div>
  <span class="teamA">Team A</span>
  <span class="teamB">Team B</span>
  <span class="mixed colorMix">Team A + Team B</span>
</main>

JS Fiddle demo.

References:

Overlap two background-color with javascript

2 Answers2