Question

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

对于影子，我制作了一个代码：

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;

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

问题是即使会有很长的滚动条，如何使内部阴影效果为完整背景。

Answer 1

使用您的图片更改图片...

增强您的代码，而不是检查并告诉我......

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

希望这对你有用......

Answer 2

你的代码工作正常

    <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

CSS背景内部阴影不填充整个背景

2 个答案: