Как заполнить текст ребенка фоном-изображением родителя?

Как заполнить текст ребенка фоном-изображением родителя?

06.06.2019 08:23:59 Просмотров 43 Источник

проблема

Что ж... я не знаю, возможно ли это вообще. У меня есть замечательное меню с градиентом и их дочерними элементами с прозрачным фоном-цвет и цвет белый: https://nimb.ws/o5xWlZ

При наведении курсора Я хочу сделать цвет фона этого дочернего элемента белым, а цвет текста сделать его прозрачным для отображения этой части градиента .

То, Что Я Пробовал

Моей первой реакцией было:

child-element{background-color:#fff;color:transparent}

И вы можете себе представить результаты (спойлер: https://nimb.ws/TNrCKJ ) ... только белый в кнопке. Затем, я думаю применить коробку-тень ...

 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, я не могу редактировать так много, потому что это динамический <ul>в a .ТПЛ

<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? */
 }

Образец:

Нравится заполнять текст изображением как в фотошопе:

enter image description here

Спасибо Вам большое за потраченное время :)

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent#comment99555230_56482378
Похоже, что-то меньшее или SCSS может вам помочь. Погугли это.
https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent#comment99555331_56482378
Вы хотите создать эффект, в котором цвет текста будет частью градиента? Как порез?
https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent#comment99555971_56482378
@EdwinDijasChiwona да, точно, как порез, вот так !Пример
https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent#comment99557216_56482378
@Мартин друг рассказал мне о возможности использовать js тоже ... если я не могу сделать это только с css, я могу доказать другие вещи:) время google ~

Ответы - Как заполнить текст ребенка фоном-изображением родителя? / How to fill text of a child with the background-image of the parent?

Ron Royston

06.06.2019 08:37:43

Использовать комбинатор потомков? Как внизу?

section {
  background: blue;
}

section .foo {
  color: red;
}
<section>
  <h2>Hello</h2>
  <p class=foo>
    World
  </p>
</section>

https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent/56482568#comment99556215_56482568
Это больше похоже на то, чтобы сделать цвет фона "мира" красным, а цвет текста - цветом фона раздела, как в этом примере
Preston Reyes

06.06.2019 10:08:46

https://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/ вам нужно будет создать векторную маску, используя SVG.

предупреждение: css Маска в настоящее время не поддерживается IE https://caniuse.com/#search=mask

сайт CodePen пример: 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;
}
https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent/56483687#comment99558849_56483687
Я хочу проголосовать за это, но я не знаю, как, спасибо Вам за эту информацию!
https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent/56483687#comment99642643_56483687
Круто, я рад, что смог помочь. Я думаю, что если вы нажмете стрелку вверх рядом с верхней частью моего ответа, это будет сделано. Большое спасибо.
Является ответом!
v-alex

06.06.2019 10:55:51

Окончательно

После поиска его с разными словами для одной и той же проблемы я нашел интересную статью в CSS-Tricks об этом. Здесь я нашел этот codepen от Ричарда .

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>

Вы можете увидеть его в полном виде страницы на Codepen

Большое спасибо всем, кто читает меня и предлагает мне решение или трюк.

Приветствую Вас, В. Алекс.

https://stackoverflow.com/questions/56482378/how-to-fill-text-of-a-child-with-the-background-image-of-the-parent/56484273#comment99564192_56484273
Не забудьте включить незафиксированный background-clip: text.
Закрыть X