2009-08-24 53 views
0

是他們的任何方式,我可以使用背景顏色顯示在我的部門使用CSS或JavaScript的50%???我想要做的這個盒子有一個背景圖片[PNG],我想填寫50顯示收視率的顏色%......我可以使用半填充背景圖片的圖片,但我相信這會降低我的評分系統,是他們以任何方式填充顏色的方塊50%或我不得不訴諸用半填充圖像本身替換背景..謝謝背景顏色比例?

回答

2

有沒有辦法將其設置爲使用CSS填充其父母的50%。你將不得不計算進度條的大小。 因此,讓我們說你的div是100px(並且有一個白色背景),並且你希望酒吧顯示55%,在裏面創建一個div,長度爲55px,進度條的顏色作爲背景。

0

我不知道div中是否有比顯示進度的背景顏色更多的內容,但讓我們假設它是唯一的內容。 您只需確保進度條具有固定寬度,高度和溢出:隱藏。

然後你在它裏面放置一個div,它有你想要的顏色作爲背景顏色,和容器div的寬度相同。這兩個div應該有一個位置:定義的屬性,絕對的或者相對的並不重要。然後剩下的唯一東西就是將內部div設置爲你想要的位置,例如左邊:-50%;

只有這最後一部分,如果你想動態地做到這一點,你需要javascript。就像getElementById('progress')。style ='left:-50%'應該可以做到。

一個快速和骯髒的(但工作)例如:

<div style="width: 200px; height: 2em; overflow: 
    hidden; position: relative; padding: 1px; border: 1px solid red"> 

    <div style="width: 200px; height: 2em; 
     background: blue; position: relative; left: -50%;"> 

     &nbsp; 
    </div> 

</div> 
 
-1

看看這個背景漸變色,並在它開始時研究用於人體的CSS代碼!

有三行代碼CCS與體內語句代碼的背景主題連接:

body { 
    font: 12px/18px Verdana, Arial, Tahoma, sans-serif; 
    color: #001133 /* Other test colors: #006DD9 #444*/; 
    /*background: #F4F4F4 url(i/bg.gif) - Another test;*/ 
    **background: -moz-linear-gradient(bottom, #ffffff, #3393C5); 
    background: #3393C5 -webkit-gradient(linear, left top, left bottom, color- stop(0.05, #3393C5), color-stop(1.00, #ffffff)) no-repeat; 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#3393C5',En dColorStr='#FFFFFF');** 
    /*margin: 0px auto;*/ 
} 

初始已於http://www.webdesignseo.go.ro網站上找到。