HTML 多文本颜色答案

【问题标题】：HTML mult-text colorHTML 多文本颜色
【发布时间】：2021-01-01 19:13:54
【问题描述】：

    <div class="mySlides fade">  
      <img src="images/homepage1/youth_academy_black_history_2.JPG" 
      style="width:100%">
    <div class="text" style="color:black">Youth Academy</div>

上面的代码生成了一张带有黑色文字的图片。可以说我想要一个笔触（多色），即黑色和文本的银色轮廓。在 Photoshop 中，它被称为中风。我可以在 html 代码中这样做吗？？

【问题讨论】：

不确定这是不是你要找的 --> w3docs.com/snippets/css/…

标签： html class styles stroke

【解决方案1】：

.text {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;}

这样的东西可以工作

或

.text {text-shadow: 1px 1px 3px red;}

【讨论】：

【解决方案2】：

希望此代码对您有所帮助。在 CSS 中，您可以使用 text-stroke 属性来实现此效果。万事如意！

.text{
  -webkit-text-stroke-width: 0.5px;   
  -webkit-text-stroke-color: red;  
  text-stroke-width: 0.5px;
  text-stroke-color: yed;
  color: black;
  font-size: 18px;
  font-weight: 600;
}

 <div class="mySlides fade">  
      <img src="images/homepage1/youth_academy_black_history_2.JPG" 
      style="width:100%">
    <div class="text" style="color:black">Youth Academy</div>

【讨论】：

【解决方案3】：

为了反映 CSS 的 text-stroke 属性的效果，增加了 font-size。您可以根据自己的方便处理字体大小。如果这个答案有帮助，请告诉我。另外，您可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke 链接以了解更多信息。

.mySlides.fade .text{
-webkit-text-stroke: 0.4px yellow;
text-stroke: 0.4px yellow;
color: #000000;
font-size: 30px;
}

 <div class="mySlides fade">  
      <img src="images/homepage1/youth_academy_black_history_2.JPG" 
      style="width:100%">
    <div class="text" style="color:black">Youth Academy</div>

【讨论】：