2014-09-24 103 views
0

我想为我的背景图片做内部阴影。这张照片只是重复的图案。CSS背景内部阴影不能填满整个背景

对于阴影我犯了一个代码:

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; 

当内容被安装到浏览器(没有滚动条上的右侧)一切都很好。但是,当网站的某些内容更长,你需要向下滚动页面,然后背景阴影结束(看起来像cuted)

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

谢谢 乙

+0

你给影子格或身体 – himanshu 2014-09-24 10:31:03

+0

是影子的身体 – user3422998 2014-09-24 10:34:33

+0

你的代码工作正常,我didt看不出什么问题,你可以展示你的 – himanshu 2014-09-24 10:48:18

回答

0

变化的图像与图像...

增强你的代码,比支票,让我知道..

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

希望这会为你工作...

+0

页它不工作:/ – user3422998 2014-09-24 10:35:56

+0

在这里发布您的HTML和CSS这样...我可以检查... – DeDevelopers 2014-09-24 10:39:12

+0

@ user3422998 检查此链接..其工作在这里罚款..也更新最新代码在我回答... http://jsfiddle.net/gez0btoL/1/ – DeDevelopers 2014-09-24 10:45:31

0

您的代码正常工作

<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