Question

我正在为使用相当机密的公司名称的网站的教程捕获图像，因此必须模糊文本。使用此HTML

<div class="draggable ad">
  <div propid="8584" class="___2_4x4">COMPANY NAME inside DIV</div>
</div>

模糊这一批当然很容易：

.draggable.ad div {
  filter: blur(2px);
}

但是“draggable”中的DIV有一个不能模糊的背景图像：

.___2_4x4 {
  background: url(/images/ad.png);
}

是否可以选择（并模糊）仅文本，而不是DIV本身？这显然不是要走的路：

.draggable.ad div:text {
  filter: blur(3px);
}

当然，可以将文本包装在一个跨度中并模糊跨度等，但由于我只是暂时需要教程图像，所以不必更改代码就好了。这可能吗？

Answer 1

此样式仅模糊文本：

div {
  color: transparent;
  text-shadow: 0 0 6px rgba(0,0,0,0.7); 
}

<div>
  Confidential Data
</div>

Answer 2

如果您想使用filter，可以在psedoelement中添加虚拟文本并以此方式应用过滤器。要隐藏原始文本，您可以使用font-size: 0 - 这具有文本无法选择的额外优势。

显然，任何人都可以查看源代码并查看原始文本。

.___2_4x4 {
   background: url(https://placeimg.com/640/480/nature) no-repeat;
   height: 200px;
   font-size: 0px;
}

.___2_4x4:after {
  content: 'fake company name';
  position: absolute;
  font-size: 1.5rem;
  filter: blur(3px);
}

<div class="draggable ad">
  <div propid="8584" class="___2_4x4">COMPANY NAME inside DIV</div>
</div>

Answer 3

您可以使用opacity上的div属性，这会影响内容（文字）和背景（图片）。该值介于0（完全透明）和1（完全不透明）之间：

＆＃13;

.___2_4x4 {
  background: url(https://placeimg.com/640/480/nature);
  height: 200px;
  width: 200px;
}

.draggable.ad div {
  opacity: 0;
}

＆＃13;

<div class="draggable ad">
  <div propid="8584" class="___2_4x4">COMPANY NAME inside DIV</div>
</div>

＆＃13;

要分别处理内容（文字）和背景（图片），您可以使用color: RGBA(0, 0, 0, 0);作为内容（或其他答案中建议的transparent）和background: RGBA(0, 0, 0, 0);背景。确保此背景的CSS位于原始CSS之后，而不是显示图像。这个想法是你想用一个新的背景覆盖原始背景：

＆＃13;

.___2_4x4 {
  background: url(https://placeimg.com/640/480/nature);
  height: 200px;
  width: 200px;
}

.draggable.ad div {
  color: RGBA(0, 0, 0, 0);
}

.___2_4x4 {
  background: RGBA(0, 0, 0, 0);
}

＆＃13;

<div class="draggable ad">
  <div propid="8584" class="___2_4x4">COMPANY NAME inside DIV</div>
</div>

＆＃13;

仅限文字的CSS选择器

3 个答案: