html - 如何用纯css创建一个十字架

Question

如何在包含图像的 div 内创建一个十字 (x)？十字架也必须与图像重叠，可以用纯css还是我必须用十字架创建一个新图像？

Answer 1

CSS-

#cross {
   width: 100px;
   height: 100px;
   position: relative;
  transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
}

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #d00;
}

#cross:before {
  left: 50%;
  width: 30%;
  margin-left: -15%;
  height: 100%;
}

#cross:after {
  top: 50%;
  height: 30%;
  margin-top: -15%;
  width: 100%;
}

演示

重现此的方法-

步-

通过不添加背景颜色来创建一个简单的正方形 -

 #cross {
       width: 100px;
       height: 100px;
       position: relative;
    }

第二步-

`CSS gives you compatibility to play with sudo-elements`.

css 中的每个元素总是有内容空间。

示例 - 在 sudo-element 之后添加之前

position:absolute第三步-通过将这些元素与相对父元素对齐之前，您可以获得形状。

最后一步 - 变换以您想要的方式旋转它。一个例子-

在 CSS 中转换

顺便说一句，@Adam 这样做的方式很聪明，曾经被我喜欢过。

Answer 2

你们这些人想的太多了。使用简单的×符号 - 100% 跨浏览器，无需转换/伪元素。

http://jsfiddle.net/mpaQS/

编辑

我意识到您可能也不了解相对/绝对定位的概念。

你的容器需要相对定位，你的“X”需要绝对定位。就像下面的小提琴：

http://jsfiddle.net/wVdvu/

Answer 3

如果我是你，我会选择简单的解决方案，只需在 div 中放一个 X 并为该 div 提供背景图片

http://jsfiddle.net/vGqDJ/

.image {
background-image: url('http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg');
background-size: cover;
text-align: center;
font-family: sans-serif;
}