画像に奇妙なアイコンと概要があります

画面上部に大きなバナーが必要です。それはリンクでなければならず、バナーにはイメージがあります。私はすべてのことをセットアップし、働いている。しかし、その周りはすべて灰色のボックスで、画像が見つからないときに表示されるアイコンが左上隅にあります。ボックスとアイコンを削除するにはどうすればよいですか？画像に奇妙なアイコンと概要があります

header.phpの

<body <?php body_class(); ?>> 

<a class="vcuLink" href="http://www.vcu.edu/" > 
    <div id="topBanner" class="vcuBanner"> 
     <img class="vcuLogo" src="vcu.png" width="910" height="59"> 
    </div> 
</a> 

<div id="page" class="site"> 
    <div class="site-inner">

私はより多くを示すことは必要ではないと思います。

のstyle.css

.vcuBanner { 
    position: relative; 
    background-color: black; 
    z-index: 100; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 62px; 
    top=0; 
} 

.vcuLogo { 
    position: relative; 
    background:url(vcu.png)no-repeat center; 
    height: inherit; 
    width: inherit; 
    z-index: 101; 
}

EDITS：詳しい情報やスクリーンショット。

style.cssのbackground：url行またはheader.phpのimgタグのいずれかを削除すると、バナーのイメージが表示されなくなります。しかし、imgタグがあると、奇妙なアイコンとアウトラインがあり、imgタグが原因であると私に信じています。

スクリーンショット：非常に上部にVCUバナーで

、あなたは私が何を言っているか見ることができます。 Internet Explorerでは、左上のアイコンは代わりにXボタンであり、アウトラインはありません。

出典

2016-07-03 Calvin

PNGファイルをイメージとイメージの両方の背景イメージとしているのはなぜですか？そのポイントは何ですか？バックグラウンド宣言で閉じ括弧の後に空白がありません。また、バナーの 'top'宣言はCSSではなくHTMLです。それは問題の一部かもしれません。 –

@JanusBahsJacquetどんな理由であれ、いずれかの場所からPNGファイルを削除すると、表示が停止するため、私は両方の場所に画像があります。背景宣言のスペースがないことはどういう意味ですか？「トップ」のキャッチのおかげで、私はそれを削除しました。 – Calvin

URLの閉じ括弧と "no-repeat"という単語の間にはスペースが必要です。私は、URLが無効になり、ブラウザが行全体を無視する（または、パスを誤って解釈してイメージをロードできない）と推測します。あなたは実際に表示されているものを見るためにブラウザのインスペクタを使ってみましたか？また、スクリーンショット（またはリンク）を含めて、見た目が正確にわかるようにしてください。 –

これには多くの原因が考えられます。そのため、最も可能性の高い原因を推測します。

あなたのファイルが互いに対してどこにあるか、私は知らないが、ここにあなたのマークアップとCSSが書かれている方法は、ファイルvcu.pngはあなたが表示されているPHPファイルとしてに同じフォルダする必要があります<img>タグが機能するには（おそらくindex.php、アドレスバーのURLが指定されています）。同様に、バックグラウンド宣言が機能するには、CSSファイルと同じフォルダに存在する必要があります。

<img>タグの位置はCSSで指定されていないため、コンテナの左上隅に表示されます。背景画像は中央に配置されているため、中央に表示されます。中央に画像があり、左に画像アイコンがないと、存在しないファイルを指すHTML <img>タグのように見えます。つまり、PNGファイルはCSSファイルと同じフォルダにありますが、PHPファイルとは異なるフォルダにあります。おそらく、CSSとPNGファイルはstyleという名前のサブフォルダにありますか？

style.cssのbackground：url行またはheader.phpのimgタグが削除されると、バナーのイメージが表示されなくなります。

これは意味があります。 イメージタグ（含まれていない<a>または<div>）でCSS定義の背景が宣言されているため、HTMLマークアップからタグを削除すると、自然にバックグラウンドイメージも削除されます。逆に、HTMLタグが誤ったパスを指しているので、そこにタグを付けておくと、画像アイコンが見つからないことを意味します。画像はあなたのindex.phpファイルへの相対配置されている場所

図を、そしてあなたは正しい場所（おそらくsrc="style/vcu.png"またはそのような何か）を指していることを確認してください。

あなたは、2つの簡単な方法でこれを解決することができます。次に、タグのスタイルをmargin: 2px auto;に設定して、画像の中央に上下のスペースを入れて、CSSの背景宣言を取り除きます。
は、スタイルコンテナdisplay: blockをする（含む<a>非空を作るために） と交換し、完全にあなたのHTMLから<img>タグを削除します。

最初のコードはより意味のあるコードを生成し、私の好みになります。どちらも通常のブラウザで同じにする必要があります。ただし、<img>タグを削除すると、そのalt属性も削除されるため、テキスト読み上げシステムに頼っているユーザーは、意味のある内容だけが改行されないスペースであるため、リンクが実際に何をするかを知る方法がありません。

出典

2016-07-03 19:57:59

画像に奇妙なアイコンと概要があります

答えて

関連する問題