小编Eve*_*all的帖子

修正点击按钮 3 时视频不播放的问题

如何调试和修复这个问题?

我发现代码非常难以调试。

如何在代码中解决这个问题?

我希望代码能够按照演示代码中的方式工作: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)

html javascript css arrays debugging

6
推荐指数
1
解决办法
605
查看次数

尝试使渐变透明以将图像放置在其后面

我能够将图像放在它后面并能够看到它。

渐变是否能够以不同的方式编写,而透明可以工作?

我该如何或如何将背景设置为透明,并使其能够在代码中工作?

使用遮罩图像或剪辑路径可以在这里工作以使其透明吗?

或者也许有不同的方式?

我应该做什么或更改我的代码才能将黑色设置为透明并使其正常工作?

现在渐变图像看起来像这样:

在此输入图像描述

--color-b: black;设置为透明时,我应该看到这个图像:

https://i.imgur.com/8sQi6Tu.png

我想要实现的目标的示例:

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)

css gradient transparent background-image linear-gradients

2
推荐指数
1
解决办法
610
查看次数

如何给三角形添加渐变?

我怎样才能将渐变颜色应用于三角形?

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)

css gradient linear-gradients

2
推荐指数
1
解决办法
78
查看次数