html - 带实心阴影的透明文本

Question

我正在尝试实现标题中提到的效果:

我使用了以下代码:

.contact-txt h1 {
	color: transparent;
	font-size: 60px;
	line-height: 1em;
	text-shadow: 3px 3px #00d44a;
}

但我得到的是绿色文本:

有没有办法像第一张图片那样有一个透明的文本和一个实心的阴影？

Answer 1

想法是把两个div叠在一起，如果只用一个透明的，阴影就不会被文字挡住。

用两个可以达到这个效果

-webkit-background-clip: text

(currently supported in Chrome, Safari, and Opera, and being implemented in Firefox) is the text value for background-clip. When used along with the proprietary -webkit-text-fill-color: transparent; feature, this allows you to clip background images to the shape of the element's text, making for some nice effects. This is not an official standard, but has been implemented across multiple browsers, as it is popular, and used fairly widely by developers. When used in this context, both of the properties would require a -webkit- vendor prefix, even for Non-Webkit/Chrome-based browsers:

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

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

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;
}

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

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