那些遇到过的问题

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

Eve*_*all 2 css gradient transparent background-image linear-gradients

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

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

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

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

或者也许有不同的方式？

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

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

在此输入图像描述

当--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%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}
Run Code Online (Sandbox Code Playgroud)

Bre*_*ald 6

该背景由一堆 165 像素的实心正方形组成，中间有不同大小的孔。当您从列表末尾（即堆栈中的底部渐变）（如果您愿意的话，最低的 z 索引）开始逐层构建它时，您可以看到这一点。最底层是一个实心黑色正方形。上面的层是一个实心的橙色正方形，中心有一个小孔。上面的层是一个实心的蓝色正方形，中心有一个稍大的孔。

\n

因此，如果将某一特定图层设置为透明，只会导致下面的图层变得更加可见。背景永远不会透过任何正方形的任何部分显示出来。

\n

在此输入图像描述

\n

\r\n
\r\n
:root {\n  --color-a: black;\n  --color-b: red;\n  --color-c: blue;\n  --color-d: orange;\n}\n\nbody {\n  background: #ffffcc;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\ndiv {\n  width: 165px;\n  height: 165px;\n}\n\n.d1 {\n  background-image: \n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d2 {\n  background-image: \n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d3 {\n  background-image: \n    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 75px,\n      #0000 75px 95px,\n      var(--color-c) 95px\n    ),\n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d4 {\n  background-image:\n    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),\n    linear-gradient(\n      90deg,\n      var(--color-b) 70px,\n      #0000 70px 100px,\n      var(--color-b) 100px\n    ),\n    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 75px,\n      #0000 75px 95px,\n      var(--color-c) 95px\n    ),\n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d5 {\n  background-image:\n    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),\n    linear-gradient(\n      90deg,\n      var(--color-a) 65px,\n      #0000 65px 105px,\n      var(--color-a) 105px\n    ),\n    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),\n    linear-gradient(\n      90deg,\n      var(--color-b) 70px,\n      #0000 70px 100px,\n      var(--color-b) 100px\n    ),\n    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 75px,\n      #0000 75px 95px,\n      var(--color-c) 95px\n    ),\n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d6 {\n  background-image:\n    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 60px,\n      #0000 60px 110px,\n      var(--color-d) 110px\n    ),\n    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),\n    linear-gradient(\n      90deg,\n      var(--color-a) 65px,\n      #0000 65px 105px,\n      var(--color-a) 105px\n    ),\n    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),\n    linear-gradient(\n      90deg,\n      var(--color-b) 70px,\n      #0000 70px 100px,\n      var(--color-b) 100px\n    ),\n    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 75px,\n      #0000 75px 95px,\n      var(--color-c) 95px\n    ),\n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}\n\n.d7 {\n  background-image:\n    linear-gradient(var(--color-a) 5px, #0000 5px),\n    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),\n    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),\n    linear-gradient(\n      90deg,\n      var(--color-b) 10px,\n      #0000 10px 160px,\n      var(--color-b) 160px\n    ),\n    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 15px,\n      #0000 15px 155px,\n      var(--color-c) 155px\n    ),\n    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 20px,\n      #0000 20px 150px,\n      var(--color-d) 150px\n    ),\n    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),\n    linear-gradient(\n      90deg,\n      var(--color-a) 25px,\n      #0000 25px 145px,\n      var(--color-a) 145px\n    ),\n    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 60px,\n      #0000 60px 110px,\n      var(--color-d) 110px\n    ),\n    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),\n    linear-gradient(\n      90deg,\n      var(--color-a) 65px,\n      #0000 65px 105px,\n      var(--color-a) 105px\n    ),\n    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),\n    linear-gradient(\n      90deg,\n      var(--color-b) 70px,\n      #0000 70px 100px,\n      var(--color-b) 100px\n    ),\n    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),\n    linear-gradient(\n      90deg,\n      var(--color-c) 75px,\n      #0000 75px 95px,\n      var(--color-c) 95px\n    ),\n    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),\n    linear-gradient(\n      90deg,\n      var(--color-d) 80px,\n      #0000 80px 90px,\n      var(--color-d) 90px\n    ),\n    linear-gradient(var(--color-a), var(--color-a));\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<div class="d1"></div>\n<div class="d2"></div>\n<div class="d3"></div>\n<div class="d4"></div>\n<div class="d5"></div>\n<div class="d6"></div>\n<div class="d7"></div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

为了达到您想要的效果，您需要能够绘制同心正方形。您可以\xe2\x80\x99t 使用线性渐变来做到这一点，因为它们是一维的。使用线性渐变可以做的最好的事情就是这样。

\n

在此输入图像描述

\n

径向渐变是二维的，但它们当然是椭圆形的而不是矩形的。可以使用径向渐变来模拟圆形（或椭圆形），但无法模拟正方形。

\n

为了获得您想要的效果，您需要使用正确的工具。绘制正方形的正确工具是 SVG。在 SVG 中，\xe2\x80\x99 可以轻松创建具有定义的笔画（边框）宽度且无填充的正方形（矩形）。

\n
<?xml version="1.0" encoding="utf-8"?>\n<svg viewBox="0 0 165 165" width="165" height="165" xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <style>\n      .st0 {stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);}\n      .st1 {fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);}\n    </style>\n  </defs>\n  <rect x="80" y="80" width="10" height="10" class="st0"/>\n  <rect x="72.5" y="72.5" width="25" height="25" class="st1"/>\n  <rect x="62.5" y="62.5" width="45" height="45" class="st1"/>\n  <rect x="52.5" y="52.5" width="65" height="65" class="st1"/>\n  <rect x="42.5" y="42.5" width="85" height="85" class="st1"/>\n  <rect x="32.5" y="32.5" width="105" height="105" class="st1"/>\n  <rect x="22.5" y="22.5" width="125" height="125" class="st1"/>\n  <rect x="12.5" y="12.5" width="145" height="145" class="st1"/>\n  <rect x="2.5" y="2.5" width="165" height="165" class="st1"/>\n</svg>\n
Run Code Online (Sandbox Code Playgroud)\n

在此输入图像描述

\n

您可以从样式表引用外部 SVG 图像，也可以将其编码为数据 URL，然后将其嵌入到样式表中。运行此代码片段以获得最终结果。

\n

\r\n
\r\n
<?xml version="1.0" encoding="utf-8"?>\n<svg viewBox="0 0 165 165" width="165" height="165" xmlns="http://www.w3.org/2000/svg">\n  <defs>\n    <style>\n      .st0 {stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);}\n      .st1 {fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);}\n    </style>\n  </defs>\n  <rect x="80" y="80" width="10" height="10" class="st0"/>\n  <rect x="72.5" y="72.5" width="25" height="25" class="st1"/>\n  <rect x="62.5" y="62.5" width="45" height="45" class="st1"/>\n  <rect x="52.5" y="52.5" width="65" height="65" class="st1"/>\n  <rect x="42.5" y="42.5" width="85" height="85" class="st1"/>\n  <rect x="32.5" y="32.5" width="105" height="105" class="st1"/>\n  <rect x="22.5" y="22.5" width="125" height="125" class="st1"/>\n  <rect x="12.5" y="12.5" width="145" height="145" class="st1"/>\n  <rect x="2.5" y="2.5" width="165" height="165" class="st1"/>\n</svg>\n
Run Code Online (Sandbox Code Playgroud)\r\n
body {\n  margin: 1em;\n  background: green;\n  display: flex;\n  justify-content: center;\n}\n\n.d1 {\n  width: 335px;\n  height: 335px;\n  background-image: url("data:image/svg+xml,%3Csvg viewBox=\'0 0 165 165\' width=\'165\' height=\'165\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7Bstroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);%7D .st1 %7Bfill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);%7D %3C/style%3E%3C/defs%3E%3Crect x=\'80\' y=\'80\' width=\'10\' height=\'10\' class=\'st0\'/%3E%3Crect x=\'72.5\' y=\'72.5\' width=\'25\' height=\'25\' class=\'st1\'/%3E%3Crect x=\'62.5\' y=\'62.5\' width=\'45\' height=\'45\' class=\'st1\'/%3E%3Crect x=\'52.5\' y=\'52.5\' width=\'65\' height=\'65\' class=\'st1\'/%3E%3Crect x=\'42.5\' y=\'42.5\' width=\'85\' height=\'85\' class=\'st1\'/%3E%3Crect x=\'32.5\' y=\'32.5\' width=\'105\' height=\'105\' class=\'st1\'/%3E%3Crect x=\'22.5\' y=\'22.5\' width=\'125\' height=\'125\' class=\'st1\'/%3E%3Crect x=\'12.5\' y=\'12.5\' width=\'145\' height=\'145\' class=\'st1\'/%3E%3Crect x=\'2.5\' y=\'2.5\' width=\'165\' height=\'165\' class=\'st1\'/%3E%3C/svg%3E");\n}
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

归档时间：

查看次数：

610 次

最近记录：

2 年 前
相关归档
Android Web App:位置:固定坏了？ 32
如何针对导致更改的单击事件设置ng-repeat项目的动画 27
如何在鼠标悬停时显示隐藏的div？ 23
在IE7/IE8中使用:not()伪类 22
删除类后,CSS转换不起作用 21
CSS将鼠标悬停在div上,但如果将鼠标悬停在他的孩子身上则不会 17
如何居中水平表格单元格 16
为什么"position:absolute; left:0; right:0; width:XYpx; margin:0 auto"实际上是中心？ 16
动态多色渐变图像 5
在opencv中matlab梯度等效 2
难疑归档
如何使用保存实例状态保存Android Activity状态？ 2538
在vi中快速缩进多行 2111
什么是智能指针,什么时候应该使用？ 1730
INNER JOIN,LEFT JOIN,RIGHT JOIN和FULL JOIN之间有什么区别？ 1602
在Mac上查找(并终止)进程锁定端口3000 1595
在C++中将int转换为字符串的最简单方法 1488
计算C#中的相对时间 1461
<meta http-equiv ="X-UA-Compatible"content ="IE = edge">是做什么用的？ 1378
安全地将JSON字符串转换为对象 1298
对JavaScript对象数组进行排序 1233