0

両方の軸で画像を中央に配置し、その画像の左上の領域にリンク可能な領域を追加する必要があります。これは webkit と ff ではうまく機能しますが、失敗します。私のhtmlコードはこれです：

<body>
<div class="content">
    <img src="images/main_image.jpg" />
    <a href="#somelinkhere">Logo</a>
</div>
</body>

そして私のcssコードはこれです：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}
div.content {
    position: relative;
    width: 1001px; 
    height: 626px;
    top: 50%;
    margin: 0 auto;
    padding: 0;
}
div.content img {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    top: -50%;
}
div.content a {
    width: 14%;
    height: 9%;
    display: inline-block;
    position: absolute;
    top: -42%;
    left: 7%;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}

これは、つまり、それに応じて配置されたインラインブロックとして表示されるタグを使用しているため、機能しません。私たちの友人、つまり、テキストインデントのため、リンク可能な部分が画面にまったく表示されません。誰かが少し助けることができますか？ありがとう。このデモは、私が思うにあなたをもっと助けるでしょう。

4

2 に答える 2

1

このデモを見てください(または結果はこちらのみ)

HTML は変更されません。画像の高さ/幅はコンテンツ div と同じであると仮定します

CSS:

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}
div.content {
    position: relative;
    padding: 0;
    border:solid 1px blue;
    width: 1001px; 
    height: 626px;
    /*below will center div on screen */
    top: 50%;    
    margin: -313px auto 0;

}
div.content img {
    margin: 0;
    padding: 0;
    display: block;    
    border:solid 1px white;
   /*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {        
    width: 14%;
    height: 9%;    
    position: absolute;
    /* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
    top: 10%;
    left: 7%;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    border:solid 1px green;
}
于 2013-04-04T12:05:36.067 に答える
0

コンテナを作成して画面の下部に移動し、その外側の画像を画面の左上隅に移動しているように見えます。この最後のステップは、まさに多くの場合失敗するものです。子要素は通常、親コンテナーを離れるときに非表示になるか切り取られます。IE はより制限的ですが、この場合は正しいです。

イメージをコンテナーの外に配置すると、目的を達成しやすくなります。body はそれ自体が常に 100% の幅と高さのコンテナーであることに注意してください (50% などに変更することはできません)。

これがjs-fiddleの結果です

HTML:

<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">   
    This is the container
    <a href="#" >Logo</a>
</div>
</body>

CSS:

body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px; 
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
    color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}

一般に、負の値は避けるのが最善です。それらは多くのブラウザーで誤解され、問題を引き起こします。

于 2013-04-04T11:19:33.810 に答える