主页 / 问题 / 784209
Accepted
user272575
Asked:2020-02-13 03:11:19 +0000 UTC2020-02-13 03:11:19 +0000 UTC

图像而不是文本颜色 css

  • 772

是否可以使用某些方法用文本而不是颜色填充图像。

html

4 个回答

  1. Best Answer

    我发现如何在纯 CSS 中使用mix-blend-mode. 不幸的是，并非所有现代浏览器都支持它。

    .text {
  background: url(https://im0-tub-ru.yandex.net/i?id=eab0e1b995f2c8861ea50c27af8601bb-l&n=13);
  background-size: cover;
}

h1 {
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
  font-size:50px;
}
    <div class="text">
  <h1>Изображение внутри буквы</h1>
</div>

    • 10

  2. 这是一种仅适用于 webkit 引擎上的浏览器的方法

    .block{
  background:url(https://upload.wikimedia.org/wikipedia/ru/1/1d/%D0%91%D0%B5%D0%B7%D0%BC%D1%8F%D1%82%D0%B5%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C.png) no-repeat center/cover;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  color:yellow;
  font-weight:bold;
  font-size:90px;
}
    <div class="block">
  Текст 
</div>

    • 6

  3. 使用文本作为掩码

    我们把图片作为背景，文字作为图片的蒙版

    在此处输入图像描述

    换句话说，我们通过文字字母形式的剪切来看到图片。

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
  <mask id="LetMask"  > 
  <rect 
    x="0" y="0"
    width="100%"
    height="100%"
    fill="#black" />
     <text
      font-size="300px"
      font-family="serif"
      x="100" y="300"
      fill="white">
      Text &#9973;
     </text>
  </mask>
</defs>
 <image 
   xlink:href="https://isstatic.askoverflow.dev/sbuGW.jpg"
   width="100%"
   height="100%"
   mask="url(#LetMask)" /> 
</svg>

    蒙版由两部分组成：一个与图像重叠 100% 且完全不透明度的矩形，fill="black"以及一个完全透明的文本。fill="white"

    您可以添加一条线，一个半透明的文本笔划

    stroke="grey" stroke-width="4" 


    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
  <mask id="LetMask"  > 
  <rect 
   x="0"
   y="0"
   width="100%"
   height="100%"
   fill="#black" />
    <text
     font-size="300px"
     font-family="serif"
     x="100"
     y="300"
     fill="white"
     stroke="gray"
     stroke-width="5">
     Text &#9973;
    </text>
  </mask>
</defs>
 <image 
   xlink:href="https://isstatic.askoverflow.dev/sbuGW.jpg"     width="100%"
   height="100%"mask="url(#LetMask)" /> 
</svg>

    蒙版可以相对于背景移动

    蒙版动画

    使用遮罩文本的调整大小动画和位置 

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
  <mask id="LetMask"  > 
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    fill="#181818" />
  <!-- Анимация размера шрифта -->
  <text
    font-size="300px"
    font-family="serif"
    x="100"
    y="300"
    fill="white">
    Text &#9973;
    
  <animate id="anSize"
   attributeName="font-size"
    begin="0s;anX.end+0.5s"
    dur="5s"
    values="1;300"
    fill="freeze" />
<!-- Анимация перемещения текста по координате "X" -->  
  <animate id="anX"
   attributeName="x"
   begin="anSize.end+0.5s"
   dur="8s"
   values="10;300;300;10;10;300;10"
   fill="freeze" /> 
    </text>
    </mask>
</defs>
 <image xlink:href="https://isstatic.askoverflow.dev/sbuGW.jpg" width="100%" height="100%"mask="url(#LetMask)" /> 
</svg>

    • 6

  4. 这是另一个pattern选择svg

    <svg  xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
 width="200" height="100" viewBox="0 0 200 100">
<style>
svg{
background:transparent;
}
</style>
<pattern id="pattern" patternUnits="userSpaceOnUse"
         width="200" height="100" viewBox="0 0 200 100">
    <image xlink:href="https://get.wallhere.com/photo/trees-forest-fall-waterfall-water-nature-rocks-national-park-pond-jungle-stream-rainforest-watercourse-wasserfall-habitat-natural-environment-body-of-water-water-feature-57484.jpg" width="200" height="100" />
</pattern>
<text x="15" y="80"   stroke="none" stroke-width="11"  font-size="100px" fill="url(#pattern)" >Text</text>
</svg>

    • 5

相关问题