Question

如何在整个（div）元素上放置一个大十字架？

我有一个页面上有一个人的详细信息 - 名字，dob，地址等 - 如果该人已去世，我仍然想显示联系方式（地址，电话号码等）但是想要通过这一切来表明它不应该被使用。

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

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。那个答案画了一个彩色三角形，这个问题是关于一个十字架

Answer 2

您可以将:before和:after与变换结合使用，将X放在整个div上： DEMO

.container {
    position: relative;
    background: gray;
    padding: 30px;
    overflow: hidden; //hide overflow of pseudo elements
}

.container:before, .container:after {
    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    //center the X vertically and horizontally:
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.container:after {
    -webkit-transform: rotate(45deg);    
    transform: rotate(45deg);
}

Answer 3

添加一个包含em大小字体的绝对定位div（100％高度/宽度），用“X”填充

<div class="deceased">X</div>

将正确扩展（并保存图像回调:)）

如果你不喜欢通过设置它的大小来剪裁X，那么当div大小改变时你将需要javascript来调整它。

更好的是，您可以使用:after伪类添加它并保存额外的div和“X”

.deceased:after
{ 
    content:"X";
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    font-size: 1000px;      // adjust this a little though it will be clipped by the div
    text-align: center;
    line-height: 100%;
    overflow: hidden;
}

或:before ..会将其“置于”现有内容

之下

.deceased:before
{ 
    content:"X";
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    font-size: 1000px;      // adjust this a little though it will be clipped by the div
    text-align: center;
    line-height: 100%;
    overflow: hidden;
}

<强>更新

我确实找到了一种只使用CSS的方法......

@media all and (min-width: 50px)  {  .deceased:before  {   font-size:0.1em;  } }
@media all and (min-width: 100px) {  .deceased:before  {   font-size:0.2em;  } }
@media all and (min-width: 200px) {  .deceased:before  {   font-size:0.4em;  } }
@media all and (min-width: 300px) {  .deceased:before  {   font-size:0.6em;  } }
@media all and (min-width: 400px) {  .deceased:before  {   font-size:0.8em;  } }
and so on ....

更新2

包含文本的内联svg会将文本缩放到div的大小......

.deceased:before
{ 
    content: url('data:image/svg+xml;utf8,<svg>....</svg>');
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    overflow: hidden;
}

Answer 4

你可以在你的盒子元素上使用class。然后，通过class，将您的十字架作为背景或伪元素添加到其上，使用background-size或width/height进行伪元素和绝对定位。

无论如何，使用一个类会帮助你为那个盒子制作一个特定的样式，它甚至可以显示：none或opacity:0.5; pointer-events:none;，或者你认为正确和连贯的任何东西意义和网站设计。

Answer 5

CSS并不是真的设计用于这种事情 - div元素的目的是将html划分为多个部分，以便您可以将格式（CSS）应用于div标记内的元素。你可以尝试的是格式化文本以通过它。

<p style="text-decoration: line-through">Name</p>

它仍然可读，但明显不存在。

CSS穿过一个元素

5 个答案: