请问，如何在一个div的两边添加两张图片。
你看，我的网站上有一个主容器，我想在两边添加一点装饰，比如一个阴影，它会突出实际内容而不太强调背景，你知道吗？
所以，我得到了这样的东西:
页面.html
...
<body>
<div id="container">
<div id="shadow-left"></div>
<div id="shadow-right"></div>
...
</div>
...
</body>
...主.css
...
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
#shadow-left {
// Gotta do that on the left site too
}
#shadow-right {
position: absolute;
top: 80px; // So there's a little space just for the upper nav
left: 840px;
width: 500px;
height: 100vh;
background: url('/res/img/shadow-right.png') 0 0 no-repeat;
}
...我想象它看起来像 this ，但什么都没有。我怎样才能做到这一点？
最佳答案
Here是一个 fiddle ，其中主要内容被您喜欢的任何颜色遮盖，您可以通过使用 css 来扩展阴影效果，我相信在线有很多 css-shadow 生成器。希望这就是您要找的。
HTML
<div id="main"></div>
CSS
#main {
width:60%;
margin-left:auto;
margin-right:auto;
background:green;
height:1000px;
box-shadow: 30px 0 19px -4px lightgreen, -30px 0 19px -4px lightgreen;
}
附言请原谅绿色..
关于html - 在 div 的两边添加图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33171524/