如何用 parent 的 background-image 填充 child 的文本?
How to fill text of a child with the background-image of the parent?
问题
嗯...我不知道这是否可能。我有一个带有渐变的 很棒的 菜单,它们的 child 元素具有透明 background-color 和白色:https://nimb.ws/o5xWlZ
在悬停中,我想将此 child 元素的 background-color 颜色设置为白色,颜色文本使其透明,以便 显示渐变的那部分 .
我试过的
我的第一反应是:
child-element{background-color:#fff;color:transparent}
你可以想象结果(剧透:https://nimb.ws/TNrCKJ)...按钮中只有白色。
然后,我想应用 box-shadow ...
child-element{-webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);-moz-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);}
然后......搜索和搜索......没有找到任何东西......所以,我在这里。
代码
这是 HTML,我不能编辑那么多,因为它是 .tpl
中的动态 <ul>
<div id="block_top_menu" class="full-width here-is-the-gradient">
<ul class="sf-menu transparent">
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
... others li elements ...
</ul>
</div>
这是 CSS
#block_top_menu{
background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));
background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aa447',endColorstr='#4d81bd',GradientType=1);otherthings
}
.sf-menu{
background:transparent;
...otherthings...
}
...
.sf-menu > li > a{
border:none;color:#fff;
font: 500 18px Oswald;
padding:10px 5px;
text-transform:none;
}
.sf-menu > li > a:hover {
/* What do I put here? */
}
一个例子:
喜欢用 Photoshop 中的图像填充文本:
非常感谢您的宝贵时间:)
使用后代组合器?像下面这样?
section {
background: blue;
}
section .foo {
color: red;
}
<section>
<h2>Hello</h2>
<p class=foo>
World
</p>
</section>
https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/
您将需要使用 SVG 创建矢量蒙版。
警告:
css IE 目前不支持掩码
https://caniuse.com/#search=mask
代码笔示例:
https://codepen.io/antonietta/pen/zqpBEg
.masked {
margin: 20px auto;
display: block;
max-width: 100%;
height: 450px;
mask-image: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/234228/trapeze.png),
url(https://s3-us-west2.amazonaws.com/s.cdpn.io/234228/alpha-star.png);
mask-position: center center, bottom right;
mask-repeat: no-repeat, no-repeat;
mask-size: 350px 350px, 350px 350px;
}
终于
在用不同的词搜索相同的问题后,我在 CSS-Tricks 中发现了一篇关于此的有趣文章。
我在这里找到了这个 codepen from Richard.
html, body{ background: grey; }
p{ margin: 0px; }
#clip{
/*
Ensure background is added first
*/
background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 28vw;
font-weight: bold;
text-align: center;
}
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
然后,用我的 html 和 css 补充这个技巧,我得到了预期的结果:
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400&display=swap');
/* Styles for the parents and child */
#block_top_menu{background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6aa447',endColorstr='#4d81bd',GradientType=1);display: flex;padding:0}
.sf-menu{background:transparent;border:none;box-shadow:0 0 #ccc;display:flex;width: inherit;margin:0}
.menu-li{border:none;float:none;margin:0;padding:10px 20px;}
.sf-menu > li:hover{background-color:#fff;}
.sf-menu > li > a{border:none;color:#fff;font: 400 20px Oswald;text-transform:none}
/* Magic */
.sf-menu > li:hover > a{
background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*This last 3 lines are important for the magic*/
}
/* Others */
ul{list-style:none}
a{text-decoration: none;}
body{align-content:center;background-color:#f1f1f1;display:flex;flex-wrap:wrap;font-family:Oswald;height:90vh;justify-content:center;}
<h1>Fill text with the gradient background of the parent</h1>
<div id="block_top_menu" class="full-width here-is-the-gradient">
<ul class="sf-menu transparent">
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
</ul>
</div>
您可以在 Full Page View at Codepen
中看到它
非常感谢所有阅读我并向我提出解决方案或技巧的人。
你好,V.Alex。
问题
嗯...我不知道这是否可能。我有一个带有渐变的 很棒的 菜单,它们的 child 元素具有透明 background-color 和白色:https://nimb.ws/o5xWlZ
在悬停中,我想将此 child 元素的 background-color 颜色设置为白色,颜色文本使其透明,以便 显示渐变的那部分 .
我试过的
我的第一反应是:
child-element{background-color:#fff;color:transparent}
你可以想象结果(剧透:https://nimb.ws/TNrCKJ)...按钮中只有白色。 然后,我想应用 box-shadow ...
child-element{-webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);-moz-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,1);}
然后......搜索和搜索......没有找到任何东西......所以,我在这里。
代码
这是 HTML,我不能编辑那么多,因为它是 .tpl
中的动态<ul>
<div id="block_top_menu" class="full-width here-is-the-gradient">
<ul class="sf-menu transparent">
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
... others li elements ...
</ul>
</div>
这是 CSS
#block_top_menu{
background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));
background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);
background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aa447',endColorstr='#4d81bd',GradientType=1);otherthings
}
.sf-menu{
background:transparent;
...otherthings...
}
...
.sf-menu > li > a{
border:none;color:#fff;
font: 500 18px Oswald;
padding:10px 5px;
text-transform:none;
}
.sf-menu > li > a:hover {
/* What do I put here? */
}
一个例子:
喜欢用 Photoshop 中的图像填充文本:
非常感谢您的宝贵时间:)
使用后代组合器?像下面这样?
section {
background: blue;
}
section .foo {
color: red;
}
<section>
<h2>Hello</h2>
<p class=foo>
World
</p>
</section>
https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/ 您将需要使用 SVG 创建矢量蒙版。
警告: css IE 目前不支持掩码 https://caniuse.com/#search=mask
代码笔示例: https://codepen.io/antonietta/pen/zqpBEg
.masked {
margin: 20px auto;
display: block;
max-width: 100%;
height: 450px;
mask-image: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/234228/trapeze.png),
url(https://s3-us-west2.amazonaws.com/s.cdpn.io/234228/alpha-star.png);
mask-position: center center, bottom right;
mask-repeat: no-repeat, no-repeat;
mask-size: 350px 350px, 350px 350px;
}
终于
在用不同的词搜索相同的问题后,我在 CSS-Tricks 中发现了一篇关于此的有趣文章。 我在这里找到了这个 codepen from Richard.
html, body{ background: grey; }
p{ margin: 0px; }
#clip{
/*
Ensure background is added first
*/
background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 28vw;
font-weight: bold;
text-align: center;
}
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
然后,用我的 html 和 css 补充这个技巧,我得到了预期的结果:
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400&display=swap');
/* Styles for the parents and child */
#block_top_menu{background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6aa447',endColorstr='#4d81bd',GradientType=1);display: flex;padding:0}
.sf-menu{background:transparent;border:none;box-shadow:0 0 #ccc;display:flex;width: inherit;margin:0}
.menu-li{border:none;float:none;margin:0;padding:10px 20px;}
.sf-menu > li:hover{background-color:#fff;}
.sf-menu > li > a{border:none;color:#fff;font: 400 20px Oswald;text-transform:none}
/* Magic */
.sf-menu > li:hover > a{
background:#6aa447;background:-moz-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-webkit-gradient(left top,right top,color-stop(0%,#6aa447),color-stop(100%,#4d81bd));background:-webkit-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-o-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:-ms-linear-gradient(45deg,#6aa447 0%,#4d81bd 90%);background:linear-gradient(to right,#6aa447 0%,#4d81bd 90%);
background-attachment: fixed;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*This last 3 lines are important for the magic*/
}
/* Others */
ul{list-style:none}
a{text-decoration: none;}
body{align-content:center;background-color:#f1f1f1;display:flex;flex-wrap:wrap;font-family:Oswald;height:90vh;justify-content:center;}
<h1>Fill text with the gradient background of the parent</h1>
<div id="block_top_menu" class="full-width here-is-the-gradient">
<ul class="sf-menu transparent">
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
<li class="menu-li category transparent"><a href="/257-productos-medicos" title="Productos Médicos">Productos Médicos</a></li>
</ul>
</div>
您可以在 Full Page View at Codepen
中看到它非常感谢所有阅读我并向我提出解决方案或技巧的人。
你好,V.Alex。