尝试进行渐变透视以将图像放置在其后面

问题描述 投票：0回答：1

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

渐变可以用不同的方式编写，而透明可以工作吗？

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

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

或者也许有不同的方式？

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

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

当

--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;
}


: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%);
}
<div class="container">
  <div class="panel-left">
  </div>
  <div class="panel-right">
  </div>
</div>

css background-image gradient transparent linear-gradients
1个回答
4
投票

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

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

:root {
  --color-a: black;
  --color-b: red;
  --color-c: blue;
  --color-d: orange;
}

body {
  background: #ffffcc;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

div {
  width: 165px;
  height: 165px;
}

.d1 {
  background-image: 
    linear-gradient(var(--color-a), var(--color-a));
}

.d2 {
  background-image: 
    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));
}

.d3 {
  background-image: 
    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));
}

.d4 {
  background-image:
    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));
}

.d5 {
  background-image:
    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));
}

.d6 {
  background-image:
    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));
}

.d7 {
  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-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));
}
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>
<div class="d7"></div>

要获得所需的效果，请创建一个 SVG 图像用于背景，而不是使用渐变。在 SVG 中，可以轻松创建具有定义笔画（边框）宽度且无填充的正方形（矩形）。

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


body {
  margin: 1em;
  background: green;
  display: flex;
  justify-content: center;
}

.d1 {
  width: 335px;
  height: 335px;
  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");
}
<div class="d1"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.