透明文本与实心阴影

Question

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

我使用了以下代码:

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

但我得到的是绿色文字:

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

Answer 1

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

使用两个可以实现这种效果

-webkit-background-clip:文本

(目前在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

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>