Question

我正在尝试在不同的部分制作一些不同颜色的ASCII艺术。

示例重影的颜色与文本不同：

<pre>
 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'    
</pre>

Answer 1

嗯。由于幽灵和文字的高度是不相等的，所以确实很难（几乎不可能）。

但这是一个接近您要求的（半）解决方案。

结合使用linear-gradient和background-clip属性。

尝试一下

pre{background: -webkit-linear-gradient(blue 44px, red 10%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

<pre>
 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'    
</pre>

一个代码笔：https://codepen.io/Ev1tw1n/pen/NEoxRe

Answer 2

您可以考虑多个背景，并且可以轻松调整pre元素各部分的颜色。您还可以考虑使用em单位，以便它可以与font-size的任何值一起使用：

pre {
  background:
    linear-gradient(blue, blue) 0 0/5em 5em,
    linear-gradient(red, red) 0 100%/5em calc(100% - 5em),
    linear-gradient(green, green) 5em 0/10em 3em,
    linear-gradient(orange, orange) 5em 100%/10em calc(100% - 3em),
    linear-gradient(purple, purple) 15em 0/5em 5em,
    linear-gradient(#22eeff, #22eeff) 15em 100%/10em calc(100% - 5em);
  background-repeat:no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<pre>
 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'    
</pre>
<pre style="font-size:20px">
 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'    
</pre>

更改pre的不同部分的颜色

2 个答案: