透明文本与实心阴影

Question

我正在努力实现标题中提到的效果：

我使用了以下代码：

<?php
$stmt = $dbh->prepare("SELECT * FROM table WHERE screeningId = ?");
if ($stmt->execute(array($_POST['ajaxid']))) {
  while ($row = $stmt->fetch()) {
    print_r($row);
  }
}
?>

但我得到的是绿色文字：

有没有办法让透明文字像第一张图片一样带有实心阴影？

Answer 1

这个想法是将两个div堆叠在一起，如果你只使用一个透明，阴影不会被文本阻挡。

使用两个可以达到这个效果

  

-webkit-background-clip：text

     

（目前在Chrome，Safari和Opera中支持，并在Firefox中实施）是background-clip的文本值。与专有的-webkit-text-fill-color一起使用时：transparent;功能，这使您可以将背景图像剪切为元素文本的形状，从而产生一些很好的效果。这不是官方标准，但已经在多个浏览器中实现，因为它很受欢迎，并且被开发人员广泛使用。在此上下文中使用时，即使对于非基于Webkit / Chrome的浏览器，这两个属性都需要-webkit-供应商前缀：

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

     

参考：https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text

＆＃13;

＆＃13;

div {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(http://www.cameraegg.org/wp-content/uploads/2013/08/AF-S-DX-NIKKOR-18-140mm-f-3.5-5.6G-ED-VR-sample-images-1.jpg);
  font-size: 70pt;
  font-weight: bold;
  line-height: 2em;
  padding: .5em;
  font-family: Roboto;
}

div.shadow {
  color: transparent;
  text-shadow: 7px 7px red;
}

div.text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div class="shadow">DIRECTOR</div>
<div class="text">DIRECTOR</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

现代浏览器支持Edge以外的混合模式。

这允许您设置混合模式，强光，处理灰色，就像它是透明的一样。然后，您将文本的颜色设置为灰色，并获得了效果：

<div class="test">DIRECTOR</div>
<div class="bkg"></div>

def validate_config(data_dir, config_file_dir = data_dir + '/config', json_schema = None):
    print(data_dir)
    print(config_file_dir)
    print(json_schema)

validate_config('data')