如何调试和修复这个问题?
我发现代码非常难以调试。
如何在代码中解决这个问题?
我希望代码能够按照演示代码中的方式工作:https ://jsfiddle.net/awwt6u37/
这data-id适用于哪里:
<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
Run Code Online (Sandbox Code Playgroud)
添加下面给出的答案代码后,如何解决代码中当前存在的问题?
演示代码中的行为:https://jsfiddle.net/awwt6u37/
单击<button> #3时,此处会显示正确的视频。
<div class="playButtonContainer with-curtain ">
<button class="playSingle0 cover" data-container="play1"></button>
<button class="playSingle1 cover" data-container="play1"></button>
<button class="playSingle2 cover" data-container="play1" data-id="-Xgi_way56U"></button>
</div>
function findPlayers() {
const buttons = document.querySelectorAll(".cover");
const wrapper = document.querySelector(".wrap");
buttons.forEach(function addToPlayers(button) {
players.push({
"cover": button,
"wrapper": wrapper
});
});
}
for (let i = 0; i < 3; i++) {
players.add(".playSingle" + i, …Run Code Online (Sandbox Code Playgroud) 我能够将图像放在它后面并能够看到它。
渐变是否能够以不同的方式编写,而透明可以工作?
我该如何或如何将背景设置为透明,并使其能够在代码中工作?
使用遮罩图像或剪辑路径可以在这里工作以使其透明吗?
或者也许有不同的方式?
我应该做什么或更改我的代码才能将黑色设置为透明并使其正常工作?
现在渐变图像看起来像这样:
当--color-b: black;设置为透明时,我应该看到这个图像:
我想要实现的目标的示例:
SVG 版本: https: //jsfiddle.net/h8q352mg/
为什么这这么难做到?
什么会起作用?
如何将此处的黑色更改为透明?
这就是我在代码中尝试做的所有事情,使黑色透明。
我不断尝试不同的东西,颜色不断相互融合。
这里有人知道如何做到这一点,这样颜色就不会相互融合吗?
由于主体颜色是绿色,因此当黑色设置为透明时,我应该看到代替黑色的颜色。
https://jsfiddle.net/e39mub8L/
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
Run Code Online (Sandbox Code Playgroud)
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
Run Code Online (Sandbox Code Playgroud)
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: green;
padding: 50px 8px;
}
.panel-left,
.panel-right {
position: fixed;
height: 100%; …Run Code Online (Sandbox Code Playgroud)我怎样才能将渐变颜色应用于三角形?
https://jsfiddle.net/otz9ewm8/
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid #B76BF0;
transform: translateX(4px);
z-index: 0;
}
Run Code Online (Sandbox Code Playgroud)
在代码中这将如何完成?
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid #B76BF0;
transform: translateX(4px);
z-index: 0;
}
Run Code Online (Sandbox Code Playgroud)
.spinner {
-webkit-appearance: …Run Code Online (Sandbox Code Playgroud)