CSS背景内阴影未填充完整背景答案

【问题标题】：CSS Background inner shadow not fill full backgroundCSS背景内阴影未填充完整背景
【发布时间】：2014-09-24 10:22:51
【问题描述】：

我正在尝试为我的背景图片做内阴影。图片只是重复的模式。

对于影子我做了一个代码：

background: #202020 url(images/img01.jpg) repeat;
-moz-box-shadow: inset 0 0 200px #000;
-webkit-box-shadow: inset 0 0 200px #000;
box-shadow: inset 0 0 200px #000;

当内容适合浏览器（右侧没有滚动条）时，一切都很好。但是当站点的某些内容较长并且您需要向下滚动页面时，背景阴影就结束了（看起来很可爱）

问题是即使滚动条很长，如何为全背景制作内阴影效果。

【问题讨论】：

你是在给 div 还是 body 加阴影
对身体有阴影
您的代码运行良好，我没有看到任何问题，您可以显示您的页面吗

标签： html css

【解决方案1】：

您的代码运行良好

    <div>content</div>

css

     div{background:#fff url("images/img01") repeat;
     -moz-box-shadow: inset 0 0 200px #000;
    -webkit-box-shadow: inset 0 0 200px #000;
     box-shadow: inset 0 0 200px #000;
     /*if you need word wrap
     word-wrap:break-word;*/
     }

demo

【讨论】：

【解决方案2】：

用你的图片改变图片...

增强您的代码，然后检查并告诉我..

 <div class='background'>
       This is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummyThis is dummy
</div>
 .background {
        background: #202020 url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg") repeat;
       -moz-box-shadow: inset 0 0 30px 0 #f00;
      -webkit-box-shadow: inset 0 0 30px 0 #f00;
      width:100%;
      float:left;
      height:100%;
      padding:15px;
      color:#fff;
      box-shadow: inset 0 0 30px 0 #f00;}

希望这对你有用...

【讨论】：

@user3422998 检查此链接.. 它在这里工作正常.. 还在我的回答中更新了最新代码...jsfiddle.net/gez0btoL/1