英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Expected:
Also the child positions are changeable.
答案1
得分: 2
这是我的解决方案：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
另一个解决方案，背景不随滚动而改变：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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: '\fe3b'
color: white;
display: block;
top: -60px;
position: absolute;
left: -20px;
font-size: 90px;
}
.child:after {
content: '\fe3c'
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Amir的解决方案：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
This is my solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Another solution with background that is not changing on scroll:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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: '\fe3b';
color: white;
display: block;
top: -60px;
position: absolute;
left: -20px;
font-size: 90px;
}
.child:after {
content: '\fe3c';
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Amir's solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论