画像のように
画像に対して背景が透けるようなボタンを作成し、縦横ともに中央寄せをしたいのですが方法がわかりません.....
初心者で知識不足ですが教えていただければ幸いです。
宜しくお願い申し上げます。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
幅100%ならこんな感じでしょうか。
高さは画像に依存します。
html
1<div class="demo"><img src="a.jpg"><a href="#" class="op">member</a></div>
css
1.demo{ 2position: relative; 3} 4.op{ 5position: absolute; 6top: 50%; 7left: 50%; 8display: block; 9width: 80px; 10padding: 10px; 11border: 3px solid #fff; 12color: #fff; 13opacity: 0.6; 14text-align: center; 15transform: translate(-50%,-50%); 16}
投稿2016/05/14 00:56
退会済みユーザー
総合スコア0
0
上下左右中央寄せなら以下のようにすればよいのではないでしょうか?
.demo {
height: 200px;
width: 200px;
position: relative;
}
.opacity {
width: 80px;
padding: 10px;
border: 3px solid #fff;
color: #fff;
opacity: 0.6;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -(高さ÷2=値);
margin-left: -(幅÷2=値);
}
投稿2016/01/07 02:38
総合スコア17
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
見た目をつくる一例です
css
1.demo { 2 height: 200px; 3 width: 200px; 4 background: url(a.jpg); 5 display: table-cell; 6 vertical-align: middle; 7 text-align: center; 8} 9.opacity { 10 width: 80px; 11 margin: auto; 12 padding: 10px; 13 border: 3px solid #fff; 14 color: #fff; 15 opacity: 0.6; 16 text-align: center; 17}
html
1<div class="demo"> 2 <a class="opacity" href="">Member</a> 3</div>
投稿2015/12/11 08:57
編集2015/12/11 09:00総合スコア3111
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。