在 img 上显示 X答案

【问题标题】：display X over img在 img 上显示 X
【发布时间】：2018-10-23 08:29:10
【问题描述】：

我想在 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;
}

谢谢！

【问题讨论】：

myClassName你有什么样的代码
请假设我什么都没有。我知道这有点令人困惑。
使用 svg X，然后将其覆盖在顶部。无论大小，它都会很脆。请发布您尝试过的代码，然后我们可以提供更有效的帮助。
这个问题被否决的原因是你需要先尝试一些东西。 SO 不是代码编写服务。

标签： html css image

【解决方案1】：

您可以尝试以下方法：

工作Codepen。

<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); 
}

【讨论】：