CSS 穿越一个元素

Question

如何在整个 (div) 元素上放置一个大十字？

我有一个页面，上面有一个人的详细信息——姓名、出生日期、地址等——如果这个人已经去世，我仍然想显示联系方式(地址、电话号码等)，但想把一个大十字穿过它以表明它不应该被使用。

我真的只能考虑使用图像，但由于元素的长度和宽度可能会有所不同，所以我不确定它是如何工作的。

Answer 1

您可以在该 CSS 中使用 CSS 和 SVG:

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='1'/></svg>");
  background-repeat:no-repeat;
  background-position:center center;
  background-size: 100% 100%, auto;

演示:http://jsfiddle.net/02ffvyeo/

所有这一切，包括演示，都是基于 https://stackoverflow.com/a/20231370/694469 .那个答案画了一个彩色三 Angular 形，这个问题是关于十字的