使用CSS显示两个div';在包含的div上具有背景图像的
如何使用css在一个包含背景图像颜色渐变的div上显示两个具有背景图像的div? 我正在尝试使用asp.net页面执行此操作,生成的html如下所示:使用CSS显示两个div';在包含的div上具有背景图像的,css,html,Css,Html,如何使用css在一个包含背景图像颜色渐变的div上显示两个具有背景图像的div? 我正在尝试使用asp.net页面执行此操作,生成的html如下所示: <div id="TopContainer> <div id="logos"> <div id="logoOne" class="ImgContainer"></div> <div id="logoTwo" class="ImgContainerWide
<div id="TopContainer>
<div id="logos">
<div id="logoOne" class="ImgContainer"></div>
<div id="logoTwo" class="ImgContainerWide"><div>
</div>
</div>
/********************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开发工具,并使“logo”div透明时,两个图像容器仍然不可见。提前感谢您的帮助。很可能它不起作用,因为~只在asp.net服务器控件(服务器端)中起作用,而在客户端CSS中不起作用。如果它在css中的一个目录中,请使用此目录
background-image:url(../images/company-logo.jpg);
通常~会让您访问根应用程序,因此如果您想转到根目录,只需使用/:
background-image:url(/images/company-logo.jpg);
最后,根据您的情况,您还可以使用绝对路径(而不是上面的相对路径),例如:
感谢您的建议,文件路径的~不正确,我将其调整为背景图像:url(/images/company logo.jpg);然而,我刚刚发现了我认为真正的问题。我没有设置图像div的高度,所以它们只是默认为一些很小的值。谢谢你的帮助!
background-image:url(http://www.yourdomain.com/images/company-logo.jpg);