Question

我想问一下，如何在div的两边添加两个图像。

看，我的网站上有一个主要的容器，我想在两边添加一些装饰，就像阴影会影响实际内容并减少对背景的重视，y＆＃39 ;知道

？

所以，我有这样的事情：

page.html中

＆＃13;

...
<body>
  <div id="container">
    <div id="shadow-left"></div>
    <div id="shadow-right"></div>
    
    ...
  </div>
  ...
</body>
...

＆＃13;

的main.css

＆＃13;

...

#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;
}

...

＆＃13;

我想象它看起来像this，但只是没有。我怎么能做到这一点？

Answer 1

Here是一个小提琴，其主要内容被你喜欢的任何颜色阴影，你可以通过玩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;
}

P.S。原谅绿色..

Answer 2

看起来你可以使用花车，我希望我能正确理解你的问题。

小提琴：https://jsfiddle.net/L4cjz8p9/

<强> HTML

<body>
  <div id="container">
    <div id="shadow-left"><img src="http://placehold.it/100x300"></div>
    <div id="shadow-right"><img src="http://placehold.it/100x300"></div>
    Main content
  </div>
</body>

<强> CSS

#shadow-left
{
    float:left;
}

#shadow-right
{
    float:right;
}

#container {
  position: relative;
  background: #FFF;
  width: 840px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

Answer 3

这是一种将事物放在外面的方法，例如一个集中的容器。然后，如果您只想在页面顶部放置某些内容但在向下滚动时不重复，则可以使用仅重复y或根本不重复的背景填充“阴影”。

这里的示例在容器旁边的两侧都有一个50px宽的盒子。

小提琴：http://jsfiddle.net/60yjen0a/

HTML：

<div class="container">
    <div class="shadow left"></div>
    <div class="shadow right"></div>
    <div class="content"></div>
</div>

CSS：

.container {
    position: relative;
    width: 600px;
    height: 1000px;
    margin: 0 auto;
}
.content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #eee;
}
.shadow {
    position: absolute;
    height: 100%;
    top: 0;
    background: #ddd;
    width: 50px;
}
.left {
    left: -50px;
}
.right {
    right: -50px;
}

Answer 4

有绝对位置，您可以使用right和#shadow-left { position: absolute; top: 80px; left: 0px; width: 500px; height: 100vh; background: YOUR_BACKGROUND_URL_FOR_LEFT_SHADOW; } #shadow-right { position: absolute; top: 80px; right: 0px; width: 500px; height: 100vh; background: YOUR_BACKGROUND_URL_FOR_RIGHT_SHADOW; }

<rect>

在TAP pattern

上查看此内容

在div

4 个答案: