When making a page, sometimes you need to insert a background map inside the table, and we can use CSS to control the code:
Style= "Background-image:url (./images/counter_bg.jpg); background-repeat:no-repeat;background-position:right Bottom; "
Where,./images/counter_bg.jpg is the path to the display picture.
How do I do this if I need to implement an extruded fill that does not duplicate the background map with the table extrude?
Production method:
Create a table and insert a filter for CSS in <table>, code:
Style= "Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ', sizingmethod= ' scale ')"
However, this method only supports IE, and there is a problem in IE6, that is, the hyperlinks and other elements above the background will be invalidated, and no good solution has been found for the time being. If anyone finds it, please leave a message.
In addition, if you need other more complex effects, it is recommended to use layers to achieve, using the Z-index properties of the layer to achieve, almost omnipotent ah. Example:
use Layer-implemented flash background <div style= "Position:relative" >
<embed style= "position:absolute;z-index:0" src= "http://www.68design.net/art/images/flash/20061121001.swf" Quality=high width=554 height=121 type= "Application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/ Shockwave/download/index.cgi? P1_prod_version=shockwaveflash "wmode=" opaque ">
<a href=http://www.homelabel.cn/target= "_blank" style= "cursor:pointer" >
<div style= "Position:relative;filter:alpha (opacity=0);-moz-opacity:0;left:0;top:0; Background: #CDEAF6; width:554px;height:121px;z-index:10 ">
</div>
</a>
</div>
Attached: CSS background parameters, usage
| Serial number |
Chinese description |
Markup syntax |
| 1 |
Background color |
{Font-family:verdana, Geneva, Arial, Helvetica, Sans-serif; border-color:silver; " >2 |
Background image |
{background-image:url (URL) |none} |
| 3 |
Repeat background |
{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} |
| 4 |
Fixed background |
{Background-attachment:fixed|scroll} |
| 5 |
Background positioning |
{background-position: Numeric |top|bottom|left|right|center} |
| 6 |
Figure style |
{background: Background color | background image | Background repetition | background attachment | background position} |
CSS implementation background Tula
