###背景の上に文字が乗っている画像があるのですが、要望として文字を選んでコピペしたいそうです。
実現するために背景をimgタグで表示して、position: absolute;でpタグを表示させました。
現時点で、うまく表示できているようにみえます。
レスポンシブ対応したいということで%を駆使して書いたのですが、そもそもこのような書き方でいいのか疑問がでてきました。
もっと良い書き方があるのでは…とググったのですが、いまいち「これ!」というのがありませんでした。
codepenで公開したので、このように書いたほうがいいなどアドバイスをいただけると幸いです。
https://codepen.io/rk2019/pen/exQzxo
ありがとうございます。
コードが書けるのですね。質問するのが初めてで知りませんでした。
教えていただき感謝です。
html
1 <div class="body-box"> 2 <div class="bd-cont-4c"> 3 <div> 4 <img src="http://super-healthylife.com/sample/sample-image/toiawase-2-bar.png"> 5 <p class="left-4c">abcde@abcstore.com</p> 6 <p class="right-4c">タイトル:ご依頼の件</p> 7 </div> 8 </div> 9 </div>
css
1.body-box { 2 max-width: 731px; 3 margin: 0 auto; 4} 5 6.bd-cont-4c > div { 7 position: relative; 8 margin: 0 auto; 9 text-align: center; 10} 11 12.bd-cont-4c > div p { 13 position: absolute; 14 font-weight: bold; 15 top: 50%; 16 left: 50%; 17 -ms-transform: translate(-50%,-50%); 18 -webkit-transform: translate(-50%,-50%); 19 transform: translate(-50%,-50%); 20} 21 22.bd-cont-4c .left-4c { 23 top:50%; 24 left:25%; 25 width:45%; 26} 27 28.bd-cont-4c .right-4c { 29 top:50%; 30 left:65%; 31 width:55%; 32} 33
回答2件
あなたの回答
tips
プレビュー