2023年3月9日 21:15:50go评论61阅读模式

英文:

Parent background only be visible from child element

问题

我想展示仅从子形状中显示父渐变。

我尝试在父元素中添加::after，并设置白色背景来隐藏父元素的背景颜色，但这样子元素的背景也变为白色。

当前:

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: 100px;
  height: 300px;
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 20px;
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

<div id="parent">
  <div class="child top-10"></div>
  <div class="child top-20"></div>
  <div class="child top-40"></div>
  <div class="child top-60"></div>
</div>

期望:

子元素位置也是可更改的。

英文:

I wanted to show the parent gradient just from child shape.

I tried adding ::after to parent with white background to hide parent background color, but then child's background also becomes white.

Currently:

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: 100px;
  height: 300px;
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 20px;
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

&lt;div id=&quot;parent&quot;&gt;
  &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Expected:

Also the child positions are changeable.

答案1

得分: 2

这是我的解决方案：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .child {
      position: relative;
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      border-radius: 50%;
      color: white;
      background: linear-gradient(#e66465, #9198e5);
      background-attachment: fixed;
    }

    .top-10 {
      top: 10px;
    }

    .top-20 {
      top: 20px;
    }

    .top-40 {
      top: 40px;
    }

    .top-60 {
      top: 60px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;parent&quot;&gt;
      &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

另一个解决方案，背景不随滚动而改变：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .child {
      position: relative;
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      border-radius: 50%;
      color: white;
      outline: 10px solid white;
    }

    #parent {
      background: linear-gradient(#e66465, #9198e5);
      width: fit-content;
      height: 267px;
    }

    .child:before {
      content: &#39;\fe3b&#39;
      color: white;
      display: block;
      top: -60px;
      position: absolute;
      left: -20px;
      font-size: 90px;
    }

    .child:after {
      content: &#39;\fe3c&#39;
      width: 60px;
      height: 10px;
      color: white;
      display: block;
      top: 10px;
      position: absolute;
      left: -20px;
      font-size: 90px;
    }

    .top-10 {
      top: 10px;
    }

    .top-20 {
      top: 25px;
      /* 这里进行了修正 */
    }

    .top-40 {
      top: 40px;
    }

    .top-60 {
      top: 60px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;parent&quot;&gt;
      &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Amir的解决方案：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #parent {
      width: 100px;
      height: 300px;
    }

    .child {
      position: relative;
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      border-radius: 50%;
      color: white;
      background: linear-gradient(#e66465, #9198e5);
      background-size: 50px 300px;
    }

    .top-10 {
      top: 10px;
      background-position: 0px -20px;
    }

    .top-20 {
      top: 20px;
      background-position: 0px -70px;
    }

    .top-40 {
      top: 40px;
      background-position: 0px -140px;
    }

    .top-60 {
      top: 60px;
      background-position: 0px -2000px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;parent&quot;&gt;
      &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

英文:

This is my solution:

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#e66465, #9198e5);
  background-attachment: fixed;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 20px;
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

&lt;div id=&quot;parent&quot;&gt;
  &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Another solution with background that is not changing on scroll:

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  outline: 10px solid white;
}

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: fit-content;
  height: 267px;
}

.child:before {
  content: &#39;\fe3b&#39;;
  color: white;
  display: block;
  top: -60px;
  position: absolute;
  left: -20px;
  font-size: 90px;
}

.child:after {
  content: &#39;\fe3c&#39;;
  width: 60px;
  height: 10px;
  color: white;
  display: block;
  top: 10px;
  position: absolute;
  left: -20px;
  font-size: 90px;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 25px;
  /* correction here*/
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

&lt;div id=&quot;parent&quot;&gt;
  &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

Amir's solution:

#parent {
  width: 100px;
  height: 300px;
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#e66465, #9198e5);
  background-size: 50px 300px;
}

.top-10 {
  top: 10px;
  background-position: 0px -20px;
}

.top-20 {
  top: 20px;
  background-position: 0px -70px;
}

.top-40 {
  top: 40px;
  background-position: 0px -140px;
}

.top-60 {
  top: 60px;
  background-position: 0px -2000px;
}

&lt;div id=&quot;parent&quot;&gt;
  &lt;div class=&quot;child top-10&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-20&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-40&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;child top-60&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

答案2

得分: 0

.parent元素不设置其他样式。子元素添加了两个重要的样式属性：background: linear gradient (#e66465, #9198e5); background-attachment: fixed;。渐变用于分别绘制四个圆。

所有的样式代码：

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  background: linear-gradient(#e66465, #9198e5);
  background-attachment: fixed;
  color: white;
}
.top-10 {
  top: 10px;
}
.top-20 {
  top: 20px;
}
.top-40 {
  top: 40px;
}
.top-60 {
  top: 60px;
}

注意：
background-attachment：fixed

参考链接

英文:

The parent element does not set other styles. The child element adds two important style attributes: background: linear gradient (# e66465, # 9198e5);background-attachment: fixed;. the gradient is used for four circles respectively.

all style codes:

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  background: linear-gradient(#e66465, #9198e5);
  background-attachment: fixed;
  color: white;
}
.top-10 {
  top: 10px;
}
.top-20 {
  top: 20px;
}
.top-40 {
  top: 40px;
}
.top-60 {
  top: 60px;
}

be careful:
background-attachment：fixed

https://developer.mozilla.org/en-US/docs/web/css/background-attachment

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

父元素背景只能从子元素中可见。

问题

答案1

答案2

Selenium VBA：获取具有<tr和<td下的<div class元素的表格内容

Ripped paper effect with css mask

How to get html code while hitting one website using spring boot and store this whole HTML data in one string variable?

如何使用HTML和CSS添加这些行？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论