私が基本的に探しているのは、特定の場所にある画像の上にテキスト、この場合はリンクを配置する方法であり、座標が望ましいです。usemap を介して画像にリンクを配置する方法があることは知っていますが、私の知る限り、リンクを長方形や円などの形にすることしかできません。
私は方法を探しましたが、これまでのところ不足しています。少し助けてくれる人がいることを願っています。
<div style="position:relative">
<img src="http://www.example.com/blahblah.jpg">
<a style="position:absolute; left:0px; top:0px;" herf="http://www.example.com">Some link</a>
</div>
要素にリンクを含めて、リンク要素にposition
ofを指定し、 、、、および/またはを設定する必要があります。relative
position
absolute
left
top
bottom
right
画像を (css クラスまたはスタイル属性を使用して)<div>
または他のブロック レベル要素の背景として使用し、その上にテキストを配置することができますが、うまくいきませんか? たぶんposition
、div 内のテキストを微調整するために使用します。
これを実現するには、次のようなマークアップを使用します。
<div class="container">
<img src="image.jpg">
<span class="some-text">Some Text</span>
</div>
それを次の CSS と組み合わせます。
div.container {
position: relative;
}
span.some-text {
position: absolute;
bottom: 0;
left: 0;
}
この例では、position: absolute;
テキストを含むスパンは画像の左下に配置されているように見えます (ただし、実際には、画像の親コンテナー ( ) の左下にありますposition: relative;
)。必要に応じてこれらの位置の値を変更します (例: top: 5%;
、right: 25px;
など)。
background-image
前の回答が示唆したように、イメージをコンテナ要素のとして設定することもできます。どちらのソリューションも機能します。ただし、そのソリューションを使用した場合は、親<div>
コンテナーの寸法を定義する必要があります。<img>
私の答え<div>
はこれを必要と<div>
しません<img>
.
これが役立つかどうかはわかりませんが、HTML CSS java と asp に関する情報を含む Web サイトがあり、さらにいくつかの言語の Web サイトがあります。
http://www.w3schools.comこれがお役に立てば幸いです