[問題] 純css 背景圖片

看板Web_Design作者 (frog)時間13年前 (2012/07/30 09:32), 編輯推噓2(209)
留言11則, 5人參與, 最新討論串1/1
有看過一種按鈕圖示的寫法 是用3張圖片去構成他的背景 一張是在按鈕最左側 一張是在按鈕最右側 最後一張則是用repeat的方式去填滿中間的空格 便可適用於任何寬度的元件了 這做法大多是用在圓角按鈕上@@ 因為一些因素 可能得再拿出來用 應該會使用在td或是div原件上 但卻怎麼找也找不到相關的範例 想請問有人有相關的資料可以分享一下嗎~"~ 還是卡關了@@ 主要是想在IE上實現 <tr> <td>title1</td> <td>title2</td> <td>title3</td> <td>title4</td> <td>title5</td> </tr> 然後各title的背景都是圓角圖案 我嘗試過 border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 但也都無效@@ 因為使用css3的語法 都無法正常 所以才想說 回歸古老一點的方法 用圖片去實現圓角框框 但卻都找不到適當的 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 118.163.194.235

07/30 09:41, , 1F
切三個DIV的意思嗎?
07/30 09:41, 1F

07/30 09:43, , 2F
UI LI 可以快速解決你的問題~
07/30 09:43, 2F

07/30 09:46, , 3F
說真的~跟div真得沒啥關係~純粹是CSS的概念
07/30 09:46, 3F
※ 編輯: jackyeah1213 來自: 118.163.194.235 (07/30 10:23)

07/30 13:04, , 4F
table可以用radius嗎...還真沒試過
07/30 13:04, 4F

07/30 13:24, , 5F
依照你使用圖片當背景的邏輯 你需要用的是:after跟:before
07/30 13:24, 5F

07/31 01:41, , 6F
直接寫死前後輔助用的tag來塞圓角 舊ie不吃上面的
07/31 01:41, 6F

07/31 01:42, , 7F
要向下支援舊的原本就有很多限制了
07/31 01:42, 7F

07/31 16:52, , 8F
如果要支援舊版本 after/before和border-radius都用不得@@~
07/31 16:52, 8F

07/31 16:53, , 9F
我記得舊做法是在按鈕連結a之內 文字之外 包一層<span>
07/31 16:53, 9F

07/31 16:54, , 10F
a做頭 span做尾 (頭尾都做一大段 中間就不必有了)
07/31 16:54, 10F

07/31 16:55, , 11F
然後要換色ex滑鼠移過時 用 a:hover 和 a:hover span 來變
07/31 16:55, 11F
文章代碼(AID): #1G5UG-q2 (Web_Design)
文章代碼(AID): #1G5UG-q2 (Web_Design)