【小屋】CSS自訂版面：進階─GP、BP，妳們變了！（註：資料顯示圖）

＜本文發表於2007/09/16　最後修改於２００７／０９／２０　12：19　如語娃娃＞

　　若要轉載、衍伸教學，請註明出處ˋˇˊ
　　靈感來源「毀滅者(yannan1)」家的圖，加上自己瞎矇找語法，不過和他的方式不一樣啊，需要在看看呢。

　　修改、設計方式有很多，這邊我只列出我個人修改呈現的方法。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　這邊的圖也就是勇者資料區的區塊之ㄧ，原本的樣子。（範例是隨意取的）
　　
　　通常只要使用近黑背景就會變成怪怪紅點（紅暈）、藍點（淚痕）。
　　
　　而這是我修改過後的。
　　

１、準備圖片
　‧首先想改圖就要付出一點手動合圖或繪圖的代價，
　　欄位的基本寬高：寬２５０高２４
　‧若是你懶得製作，不然簡單點，一張圖也行。
　　（只是圖會因為欄位不夠高或寬而被截圖ＸＤ）
２、增加語法
‧建議將語法置於「CSS自訂版面：五、小屋封面圖＆勇者基本資訊和能力表篇」所指到的↓
　　/*--------------------勇者基本資訊和能力表--------------------*/
　　/*------------評價區底色------------*/
　之下。
‧增加的語法如下：
/*GP、BP顯示圖隱藏*//*如果想隱藏圖片這邊加上去即可*/
.ability_pad img{
display:none;}
　　－－－－－感謝凡斯的指導－－－－－
　　　如果您使用
　　　　.ability_pad img{
　　　　border:none;
　　　　height: 0px;
　　　　;}
　　　就可以不用接著第３步驟的修改。
　　－－－－－－－－－－－－－－－－－

/*設定GP、BP區塊的背景*/
.ability_pad{
background-color:none; /*無背景色*/
background-image : url(http://); /*背景圖址*/
background-repeat:no-repeat;} /*背景圖不重複*/

‧增加語法後，會發現顯示ＧＰ（ＢＰ）數值的框框自動變寬了，如果，您覺得無所謂，可以忽略以下的修改。
（自我修改的過程中無法自定數值框的寬度，可能需要請懂的人有興趣得話研究一下ˊˇˋ）
３、修改掉數值的邊框
　‧請找到同區的「.ability」這部份的語法
　‧將「BORDER」設定成「0px」，即可。
　　「BORDER:0px solid;」
　‧如果以後想加邊框，這邊在設定上去就好。