2014-09-24 107 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