当前位置: 动力学知识库 > 问答 > 编程问答 >

css - browser no longer displaying gradient background

问题描述:

I'm trying to put a banner image (with transparent section) in a div, over a gradient background that I can change dynamically, and then overlay a table on top of it all.

 <div style="margin: 0; padding: 0; width: 796px; position: relative; ">

<img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">

<div style="margin: 0; padding: 0;

background: -webkit-linear-gradient(white, blue);

background: -o-linear-gradient(white, blue);

background: -moz-linear-gradient(white, blue);

background: linear-gradient(white, blue);

">

<img src="MiddleSlice2.gif" style="margin: 0; padding: 0; position: relative; float: left; z-index: 250; ">

</div>

<img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">

<table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >

<tr>

<td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>

<td valign="top" align="right">About Us | Register | Login</td>

</tr>

<tr>

<td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>

</tr>

</table>

</div>

I'm getting no gradient (body bg is showing under transparent portion of the banner .gif)

When I look at the element in Firebug, I get this:

element.style {

background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);

margin: 0;

padding: 0;

}

I don't think we are allowed to post URLs, but if so, I can do so.

网友答案:

Looks like everything inside your divs is either floating or position:absolute. This will cause the divs to collapse in on themselves, so that you can't see the background. Anytime you float something inside of a container that you want to expand to contain its contents, you either need to insert a clear like this:

<div id="myContainer" style="background:red;">
  <img id="myFloatingElem" style="float:left;" />
  <div style="clear:left;"></div>
</div>

Or better yet, don't do that, and use a Clearfix instead (See http://nicolasgallagher.com/micro-clearfix-hack/ for accompanying css):

<div id="myContainer" class="cf" style="background:red;">
  <img id="myFloatingElem" style="float:left;" />
</div>

For position:absolute, neither option will work, you need to specify a height for the parent in this case.

网友答案:

I tested your CSS gradient code and it works. I see the problem is in the float: left of the image inside the div tag with the gradient background but I don't know what output you wish to see because the image files are not available. Maybe you can post it clearly.

分享给朋友:
您可能感兴趣的文章:
随机阅读: