在 CSS 形状前面放置一个图像答案

【问题标题】：Place an image in front of CSS shapes在 CSS 形状前面放置一个图像
【发布时间】：2016-04-23 14:20:41
【问题描述】：

我无法将图像放在 CSS 和 HTML 中生成的两个形状的前面。我有一个矩形和一个左上角三角形，但我需要一个图像放在这两个连接的前面。 JSFIDDLE：https://jsfiddle.net/fcj9k1w9/

<title>LOCALHOST</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet"> 
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link id="css-preset" href="css/presets/preset1.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="images/favicon.ico">

<body>

<!--.preloader-->
<div class="preloader"> <i class="fa fa-circle-o-notch fa-spin"></i></div>
<!--/.preloader-->

<header id="home">
<div id="home-slider">
<img src="http://placehold.it/500x200" style="position:relative; margin-left:auto; margin-right:auto;">
<div id="rectangle-one"></div>
<div id="triangle-one"></div>

placehold.it 图片在哪里，应该是图片徽标，但我无法在两个形状前面找到它。

理想情况下，我希望它按原样位于“接缝”上方 - 但如果它可以位于矩形的中心，那就太好了。

对此的任何帮助表示赞赏。

【问题讨论】：

position:absolute; 在图像上...但是您需要更聪明地处理边距，或者绝对生成的 CSS 并管理您的 z-index 有几种方法！

标签： html css image css-shapes

【解决方案1】：

你可以使用 position: absolute 。

例如：

HTML：

<img src="http://placehold.it/500x200" class="overlayLogo">

CSS：

.overlayLogo {
   position:absolute;
   z-index: 99999;
   top: 0;
   left:0;
}

【讨论】：

完美！谢谢 - 正是我正在寻找的！
请问我如何将它放在页面的中心？我这样做的方式不能 100% 响应
我会尝试将它放在一个宽度为 100% 的容器中；然后居中？
例如：HTML:
placehold.it/500x200">
.overlayLogo { position:absolute; z 指数：99999；宽度：100%；高度：自动；文本对齐：居中；顶部：0；左：0； }

【解决方案2】：

尝试 :before 和 :after 与要在其上显示这些形状的 div。

#somediv::before{
position:absolute;
content : 'x';
top:0;
left:0;
width:20px;
height:20px;
background:gray;


}

【讨论】：