※ ChatGPTを利用し、要約された質問です(原文:背景画像上にテキストを配置したボタンについて)
背景画像上に配置したテキストを持つボタンの作成方法
このQ&Aのポイント
CSSを使用して、背景画像上にテキストを配置したボタンを作成する方法について説明します
ボタン上のテキストを簡単に書き換えることができるようにする方法についても解説します
また、ボタンの背景画像をリンクにする方法についても詳しく説明します
今晩は。
いつもお世話になっています。
CSSで次のようなボタンを作りたいと思っています。
・背景画像の上にテキストを乗せたボタン。
1)ボタン上のテキストを書き換えられるようにしたい。
2)ボタンはページによって同じ背景画像でサイズを変えたい。(指定した縦横幅に合わせて背景画像がリサイズされるようにしたい)
3)背景画像ごとリンクにしたい。
参考サイトを見て、現在以下のようなボタンを作ってみました。
1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか?
また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。
-------------CSS--------------
div.photo{
width:100px;
height:50px;
background-image:url("xxxx.png");
background-repeat:no-repeat;
position:relative;
background-size:contain;
float:right;
}
.text{
width:100px;
position:absolute;
top:8px;left:10px;
color:#ffffff;
line-height: 1.2;
font-size:15px;
}
------------HTML-------------
<div class="photo">
<div class="text"><a href="#">テキスト</a></div>
</div>
以上になります。
よろしくお願い致します。
お礼
ご返答ありがとうございます。 頂いたヒントを参考に調整してみようと思います。