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

Demo

重现这个的方法 -

步骤 -

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

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

第二步 -

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

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

例 - Adding before after sudo-element

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

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

Transform in 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;
}

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

3 个答案: