дисплей X над img

Question

Я хочу отобразить X над IMG в CSS.Однако я не хочу, чтобы X был текстом, я хочу, чтобы он был строками.С левого верхнего края до правого нижнего и слева внизу до правого верхнего.

Моя цель состоит в том, чтобы это выглядело как изображения на некоторых сайтах с фотографиями, чтобы их нельзя было скопировать.Я в порядке, если люди копируют мои изображения, но я хочу, чтобы на них была строчка.Причина, по которой я этого хочу, в том, что у меня есть страница с Достижениями, и я хочу, чтобы те, которые не разблокированы, выглядели так.(Хотя я сделал все, кроме css на img. Так что не пытайтесь делать лишнюю работу даром.)

Если вы чувствуете, что, возможно, есть лучший вид, чем 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); 
}