我在照片博客上工作，而且我的想法略有不同但是我已经得到了这个整洁的聚光灯工作，但是试图复制它以制作不止一个整洁的小聚光灯似乎无法发挥作用。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<ul>
<li><div class="tjena"><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></div></li>
<li><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></li>
</ul>
</div>
<div id="overlag 1">
<div id="spotlight" class="spotlight"></div>
</div>
<div id="overlag 2">
<div id="spotlight" class="spotlight"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/okfocus/okshadow/master/src/okshadow.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS：
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
display: table;
background-image: url("http://www.wildtextures.com/wp-content/uploads/wildtextures_white-brick-wall.jpg");
background-repeat: repeat;
background-size: 30%;
}
.main {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .title {
font-size: 5rem;
margin-bottom: 50px;
}
.main .sub-title {
font-size: 2rem;
}
.main ul {
display: flex;
}
.main ul li {
margin: 0 120px;
}
.spotlight {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
background-image: -webkit-radial-gradient(center, circle cover, transparent -7%, rgba(0, 0, 0, 0.6) 13%);
}
.bild {
height: 300px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}