0

如何使用 css 在包含 div 的背景图像上显示两个带有背景图像的 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 开发人员工具并使“logos” div 透明时，两个图像容器仍然不可见。预先感谢您的帮助。

4

1 回答 1

1

很可能它不起作用，因为 ~ 仅适用于 asp.net 服务器控件（服务器端），而不适用于客户端 CSS。如果它在您的 css 中的一个目录中，请改用它

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 回答