如何在整个 (div) 元素上放置一个大十字？
我有一个页面，上面有一个人的详细信息 - 姓名、出生日期、地址等 - 如果此人已故，我仍然想显示联系方式（地址、电话号码等），但想把一个大的交叉，表明它不应该被使用。
我真的只能考虑使用图像，但由于元素的长度和宽度可能会有所不同，我不确定它会如何工作。
【问题讨论】：
background-size:cover 的图片将是最简单的操作
标签： css
添加一个绝对定位的 div（100% 高度/宽度），其中包含 em 大小的字体，用“X”填充它
<div class="deceased">X</div>
将正确展开（并保存图像回调:)）
如果您不希望通过将 X 的大小设置得非常大来剪裁 X，您将需要 javascript 在 div 大小更改时调整其大小。
更好的是，您可以使用 :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;
}
【讨论】：
X，第二个示例必须是错误的，因为整个页面都被禁用（您不能单击或选择任何内容）。
position:absolute; height:100%; width:100%; 使元素成为页面的完整大小，而不是元素； plus 实际上并没有改变 x 的大小。
CSS 并不是真正为这类事情而设计的——div 元素的目的是将 html 划分为多个部分，以便您可以将格式 (CSS) 应用于 div 标签中的元素。您可以尝试将文本格式化为有一条线穿过它。
<p style="text-decoration: line-through">Name</p>
它仍然可读，但显然已失效。
【讨论】：
您可以在框元素上使用class。
然后，通过class，将您的十字架添加为背景或伪元素，使用background-size 或width/height 进行伪元素和绝对定位。
无论如何，使用类将帮助您为该框创建特定样式，甚至可以是 display:none 或 opacity:0.5; pointer-events:none; ，或者您认为正确且与含义和网站设计一致的任何内容.
【讨论】：
您可以将:before 和:after 与转换结合使用，在整个div 上放置一个X：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);
}
【讨论】：
-webkit-transform 更改为transform，但它成功了！谢谢。
transform 属性上方留下-webkit-transform，以便webkit 浏览器呈现它。我已经为此编辑了答案。
您可以在该 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。那个答案画了一个彩色三角形，这个问题是关于一个十字的
【讨论】：
url。