在 CSS 个形状前放置一张图片

Question

我无法让图像位于 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图片所在的位置，应该是一个图片标识，但是我在两个形状前面看不到。

理想情况下，我希望它像原来那样位于 'seam' 上方 - 但如果它可以位于矩形的中心，那也很棒。

感谢您对此提供的任何帮助。

Answer 1

你可以使用 position: absolute 。

例如：

HTML:

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

CSS:

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

Answer 2

尝试使用要显示这些形状的 div :before 和 :after 。

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


}

在 CSS 个形状前放置一张图片

Place an image in front of CSS shapes

html

css

image

css-shapes