0

css を使用して、背景画像の色のグラデーションを含む div の上に背景画像を含む 2 つの div を表示するにはどうすればよいですか? asp.net ページでこれを実行しようとしていますが、生成された html は次のようになります。

<div id="TopContainer>
    <div id="logos">
        <div id="logoOne" class="ImgContainer"></div>
        <div id="logoTwo" class="ImgContainerWide"><div>
    </div>
</div>

関連する CSS は次のようになります。

/********************styles for bar across master page-logos,img containers etc.     ********************/
#TopContainer
{
    margin:0px;
    padding:0px;
    border-radius:15px;
}

#logos
{
    width:1024px;
    height:100px;
    border-radius:15px;
    color: -moz-linear-gradient(bottom, #297381, #FFFFFF);
    color: -ms-linear-gradient(bottom, #297381, #FFFFFF);
    color: -webkit-linear-gradient(bottom, #297381,#FFFFFF);
    background:-moz-linear-gradient(bottom, #297381,#FFFFFF);
    background:-ms-linear-gradient(bottom, #297381,#FFFFFF);
    background:-webkit-linear-gradient(bottom, #297381,#FFFFFF);

}

.ImgContainer
{
    background-image:url(~/images/company-logo.jpg);
    width:250px;
    opacity:0.55;
    border-radius:15px;
}

.ImgContainerWide
{
    background-image:url(~/images/company-logo.jpg);
    width:450px;
    opacity:0.55;
    border-radius:15px;
}

何らかの理由で、画像の背景を持つ div がまったく表示されないようです。これは、Chrome 開発者ツールを使用して「ロゴ」div を透明にすると、2 つの画像コンテナーがまだ表示されないためです。助けてくれてありがとう。

4

1 に答える 1

1

~ は、クライアント側の CSS ではなく、asp.net サーバー コントロール (サーバー側) でのみ機能するため、おそらく機能していません。css から 1 つ上のディレクトリにある場合は、代わりにこれを使用します

background-image:url(../images/company-logo.jpg);

通常、~ はルート アプリケーションに移動するため、ルート ディレクトリに移動する場合は、単純に /: を使用します。

background-image:url(/images/company-logo.jpg);

最後に、状況によっては、(上記の相対パスの代わりに) 絶対パスを使用することもできます。例:

background-image:url(http://www.yourdomain.com/images/company-logo.jpg);
于 2012-10-30T01:07:34.643 に答える