當按鈕是背景圖，文字又必須在按鈕的正中間該如何透過 CSS 按照設計稿的要求呈現呢？

css3 html5

AWEI 2021-09-12 23:25:09 ‧ 1528 瀏覽

分享至

大家好，我有個 CSS 設定問題感覺到困擾需要大家的幫忙～

需求如下：
有一個按鈕的圖片，圖片中有個文字
設計稿上面標註按鈕的圖片必須寬度是 200px 文字的大小必須是 26px
文字在圖片的正中間，與圖片的上下間距是 8px ，需要達成如下圖範例～

但我始終怎麼做都做不出來～希望大家可以提供一些解法讓我知道遇到這種需求該如何處理比較好，謝謝大家！
我的問題程式碼 https://codepen.io/hong-wei/pen/GREEJRo

看更多先前的討論...收起先前的討論...

jerrythepotato iT邦新手 4 級 ‧ 2021-09-12 23:40:25 檢舉

想先了解一下，一定要用圖片嗎? 目前這個樣式可以直接用css做更方便耶

jerrythepotato iT邦新手 4 級 ‧ 2021-09-12 23:49:22 檢舉

有一種替代方案是，把你用的<a>標籤換成<button>標籤，取消預設的border，一樣再幫這個button設定背景圖片，background-size一樣是cover，寬高設成跟圖片相同就可以了

AWEI iT邦新手 4 級 ‧ 2021-09-12 23:51:07 檢舉

其實我也想用 CSS 自己做！但其實這張圖是我自己為了發問模擬畫的！
真正的按鈕圖是比較特別一點～

jerrythepotato iT邦新手 4 級 ‧ 2021-09-12 23:52:04 檢舉

方便提供看一下有多特別嗎ww

AWEI iT邦新手 4 級 ‧ 2021-09-12 23:52:44 檢舉

jerry 謝謝你回覆我再試試看～

AWEI iT邦新手 4 級 ‧ 2021-09-12 23:53:16 檢舉

哈～在公司的電腦裡，可能就比較無法提供了抱歉

jerrythepotato iT邦新手 4 級 ‧ 2021-09-13 00:02:39 檢舉

摁摁，我覺得你的問題應該是寬度跟高度沒設好，因為backgrond-size: cover會幫你把其中一邊填滿、其中一邊延伸出去，如果希望剛好滿版就要跟圖片的寬高設一模一樣( 比例相同 )

Hankz iT邦新手 2 級 ‧ 2021-09-13 00:03:06 檢舉

圖片是指定的嗎如果不是的話用裁切的方式把白色的部分去掉
不然怎麼喬都沒辦法對準
也沒有辦法證明是否已經對準了
畢竟連按鈕都不在圖片正中央
最理想是按鈕的邊界就是圖片邊界

jerrythepotato iT邦新手 4 級 ‧ 2021-09-13 00:04:53 檢舉

而background-position只是幫你調整圖片到主要顯示區塊的位置，通常是banner會因為裝置寬度的不同，而遮蔽部分區塊時用到的

窮嘶發發發 iT邦高手 1 級 ‧ 2021-09-13 09:58:37 檢舉

HTML
<main>
<a class="btn" href="javascript:;">send</a>
</main>
CSS
main{background:#000; padding:50px;}
.btn{
display: inline-block;
width: 200px;
height: 100px;
background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
background-position:-45PX -110px ;
background-size: 296px 400px;
}

a{
font-size: 26px;
line-height:96px;
text-align: center;
padding:8px 0;
}

你那個圖有白邊，按鈕圖案不是在中間
所以要用 background-position: 跟 background-size 把圖案調到你要的尺寸 200x100，之後再去考量連結文字的部分，大概就這樣
基本上，底圖就是要跟圖層大小一樣大，你原始大小也不是 200x100
另外line-height 為啥不是 100，很簡單，因為padding的關係，已經被吃掉了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

japhenchen

iT邦超人 1 級 ‧ 2021-09-13 08:47:04

HTML

<div class="dbutton">abcde我在這裡</div>

CSS

.dbutton
{
  font-size:2.0em;
    /*  寬高要以圖案實際尺寸設定 */
  height: 150px; 
  width: 340px;
  display: flex;
  background: url('https://i.stack.imgur.com/uWQGz.png') no-repeat center;
  vertical-align: middle;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

DEMO: https://jsfiddle.net/pjsg6mzt/31/