TransWikia.com

テキストエリア内の中央で、画像をbackgroundとして使ってそれを丸形で表示させるには

スタック・オーバーフロー Asked by user41069 on November 25, 2021

下記のコードは、ボタンを押すと、テキストエリアの中央で画像が10秒後に切り替わるものです。
このように、画像をbackgroundとして使う場合に、テキストボックスの中央で画像の形状(*circle1(),
circle2()内の画像は、ともに"丸形”)も変えるには、どのように書けばいいのか分かりません。
分かる方は、教えていただけませんでしょうか。

<SCRIPT LANGUAGE="JavaScript">
<!--

function circle1(){
document.getElementById('textArea').style.backgroundImage="url(https://〇〇〇.jpg)";
document.getElementById('textArea').style.backgroundRepeat="no-repeat";
document.getElementById('textArea').style.backgroundSize=80;
document.getElementById('textArea').style.backgroundPosition="center center";
       setTimeout('circle2()',10000);
}

function circle2(){
document.getElementById('textArea').style.backgroundImage="url(https://×××.jpg)";
document.getElementById('textArea').style.backgroundRepeat="no-repeat";
document.getElementById('textArea').style.backgroundSize=80;
document.getElementById('textArea').style.backgroundPosition="center center";
}

  //-->
 </script>
<center>
<textarea id="textArea" rows=20 cols=60></textarea>
<br><br>
<INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
</center>

2 Answers

"position”と“z-index”と”border-radius”を、下記にコードのように適切なところに設定すれば、
希望通りにtextareaの中央に丸形の画像が表示されるようになるようです。
*画像のサイズによって、それぞれの数値を変えて調節します。

<style>
.absolute {
                   position: absolute;
                   z-index:20;
                   border-radius:50%;
                   width:5%;
                   height:20%;
                   top:20%;
                   left:48%;  
}

.relative {
           position:relative;
           z-index:10;
}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--

function circle1(){
document.getElementById('circle-image').style.backgroundImage="url(https://〇〇〇.jpg)";
document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
document.getElementById('circle-image').style.backgroundSize=80;
document.getElementById('circle-image').style.backgroundPosition="top 30% center";
       setTimeout('circle2()',10000);
}

function circle2(){
document.getElementById('circle-image').style.backgroundImage="url(https://×××.jpg)";
document.getElementById('circle-image').style.backgroundRepeat="no-repeat";
document.getElementById('circle-image').style.backgroundSize=100;
document.getElementById('circle-image').style.backgroundPosition="top 50% left 50%";
}

  //-->
 </script>

 <center>
   <div style="position:relative; height:auto; width:980px;">
     <textarea class="relative" rows=20 cols=60></textarea>
     <span id="circle-image" class="absolute"></span>
   <br><br>
     <INPUT TYPE="button"  ONCLICK="circle1();" value="ボタン">
   </div>
 </center>

Answered by user41069 on November 25, 2021

丸形に書き換えた画像ファイルを用意して backgroundImage に指定しましょう。それが一番簡単な解決方法です。

別解:
clip-pathというCSSプロパティがありますが、clip-path: circle(50px); のように指定するとマッチする要素のものが丸く切り取られて表示されます。ただし、これは背景画像ではなくて要素全体(この場合、<textarea>全体)が切り取られますので、clip-pathを指定するだけでは目的の動作にはなりません。丸くする背景画像専用の要素を用意して、背景を透明にした<textarea>とうまく重ねる工夫が必要です。

Answered by int32_t on November 25, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP