英文:
Overlap two background-color with javascript
问题
你可以使用 JavaScript 的以下代码实现你想要的效果：
var teamAElements = document.getElementsByClassName('teamA');
var teamBElements = document.getElementsByClassName('teamB');
for (var i = 0; i < teamAElements.length; i++) {
teamAElements[i].style.backgroundColor = "rgba(0, 0, 255, 0.3)";
}
for (var i = 0; i < teamBElements.length; i++) {
teamBElements[i].style.backgroundColor = "rgba(255, 0, 0, 0.3)";
}
这样，具有 '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.
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?
答案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 -->
.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));
}
<!-- language: lang-html -->
<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>
<!-- 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):
/* 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>
</
<details>
<summary>英文:</summary>
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 &ndash; at the time of writing &ndash; 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):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* 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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
[JS Fiddle demo](https://jsfiddle.net/davidThomas/kpbLcehf/1/).
References:
* [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color).
* [`block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).
* [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
* [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
* [`clamp()`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp).
* [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix).
* [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
* [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties).
* [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
* [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
* [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
* [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).
* [`gap()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
* [`grid-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
* [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
* [`inline-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size).
* [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
* [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).
* [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
* [`margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline).
* [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
* [`padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block).
* [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline).
* [`place-contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-contents).
* [`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat).
* [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论