在图像上显示 X

Question

我想在css中的img上显示一个X。 但是我不希望X是文本，我希望它是行。 从左上角到右下角，从左下角到右上角。

我的目标是这看起来像某些照片网站上的图像，这样你就无法复制它们。 如果人们复制我的图像，我很好，但我希望它上面有一条线。 我想要这个的原因是我有一个包含成就的页面，我希望未解锁的页面看起来像这样。 (尽管我已经完成了除 img 上的 css 之外的所有工作。 所以不要试图白白做额外的工作。

如果你觉得可能有一个比X更好的外观适合它的目的，那么请在下面评论它。

这是我的HTML部分：

<div id="posB">
<div class="container">
<span>
<img id="3141cli" src="3141cli.png" />
<span>Unlock at 3,141 clicks.</span>
</span>
<span>
<img id="10000cli" src="10000cli.png" />
<span>Unlock at 10,000 clicks.</span>
</span>
<span>
<img id="25000cli" src="25000cli.png" />
<span>Unlock at 25,000 clicks.</span>
</span>
</div>
</div>

这是我的 CSS 部分：

#posB {
position: absolute;
top: 20px;
right: 55px;
}
.container span {
display: inline-block;
vertical-align: top; /* Adjust if multi-line text */
margin: 10px;
padding: 5px;
width: 120px;
color: #333;
text-align: center;
text-decoration: none;
}
.container span img {
display: block;
margin: auto;
border: 0;
width: 160px;
height: 160px;
opacity: 0.45;
}
.container span span {
display: block;
font-size: 13px;
}

谢谢！

Answer 1

您可以尝试如下操作：

工作代码笔。

<div>
<div class="line-1"></div>
<div class="line-2"></div>
<img src="http://placehold.it/400x400">
</div>
div {
width: 500px;
position: relative;
}
.line-1 {
position: absolute;
display: block;
height: 500px;
width: 5px;
background: red;
top: -12%;
left: 40%;
-webkit-transform: rotate(45deg); 
}
.line-2 {
position: absolute;
display: block;
height: 500px;
width: 5px;
background: red;
top: -12%;
left: 40%;
-webkit-transform: rotate(-45deg); 
}