背景内在褪色

Question

我有一个侧边栏的背景图片HERE。 想要仅使用CSS制作此背景，这可能吗？

侧边栏的高度正在根据内容<div>

而变化

这就是我无法使用背景图片的原因。

Answer 1

一种可能性是，你可以结合使用css渐变和框阴影。 css渐变将赋予LHS RHS阴影和盒子阴影将给予TOP阴影。 因此底边可以保持与OP图像相同。 这是 DEMO

.shadow_grad
{
  height: 200px;
  width: 100px;
  //shadow
  box-shadow: 0 5px 20px 0 rgb(0, 0, 0) inset;
  //gradient part included in fiddle, cant paste here as its long

}

Answer 2

您可以使用box-shadow来获得该效果。

   background-color:#880600;
  -webkit-box-shadow:inset 0px 5px 20px 5px black;
  -moz-box-shadow:inset 0px 5px 20px 5px black;
   box-shadow:inset 0px 5px 20px 5px black;

http://jsbin.com/bapawoho/1/

希望这会有所帮助：）