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

您可以尝试以下操作：

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

在img

1 个答案: