共用方式為

background property

  • 發行項

Specifies up to five separate background properties of an object.

 

Syntax

Integer value = object.put_background( v);Integer value = object.get_background(* sBackground);

Property values

Type: BSTR

up to five of the space-delimited Possible Values, in any order.

color (transparent)

Any of the range of color values available to the IHTMLRuleStyle::backgroundColor property.

image (none)

Any of the range of image values available to the IHTMLRuleStyle::backgroundImage property.

repeat (repeat)

Any of the range of repeat values available to the IHTMLRuleStyle::backgroundRepeat property.

attachment (scroll)

Any of the range of attachment values available to the IHTMLRuleStyle::backgroundAttachment property.

position (0% 0%)

Any of the range of position values available to the IHTMLRuleStyle::backgroundPosition property.

String format

[ <color> || <image> || <repeat> || <attachment> || <position> ]

CSS information

Applies To All elements
Media visual
Inherited no
Initial Value (see individual properties)

Standards information

Remarks

Note  The above values for the IHTMLRuleStyle::background property can be specified in any order, except when using a gradient as the image value. In this case, you must specify the gradient first.

 

The IHTMLRuleStyle::background property is a shorthand property. Separate properties can be used to specify each property, but in many cases it is more convenient to set them in one place using this shorthand property.

Individual background properties not set by the composite background property are set to their default values. For instance, the default value for image is "none". Setting "background: white" is equivalent to setting "background: white none repeat scroll 0% 0%". So, in addition to setting the background color to white, setting "background: white" clears any image, repeat, attachment, or position values previously set.

The background properties render in the object's content and padding; however, borders are set using the IHTMLRuleStyle::border properties.

Although objects do not inherit the IHTMLRuleStyle::background property, the background image or color of an object's parent appears behind an object if a background is not specified.

For more information about supported colors, see the Color Table.

The background of an element can have multiple layers. The number of layers is determined by the number of comma-separated values in the IHTMLRuleStyle::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLRuleStyle::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLRuleStyle::backgroundPosition, IHTMLRuleStyle::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Starting in Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the IHTMLRuleStyle::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLRuleStyle::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLRuleStyle::backgroundPosition, IHTMLRuleStyle::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background" as an alias for this property.

Examples

The following example shows how to create three div objects with the same width and height but different IHTMLRuleStyle::background settings.

div {
   width: 150px;
   height: 150px;
   float: left;
   margin-right: 10px;
}
.circle {
   background: aqua url(circle.png) no-repeat 90% 50%;
   /* This is equivalent to the following individual settings:
   background-color: aqua;
   background-image: url(circle.png);
   background-repeat: no-repeat;
   background-position: 90% 50%;*/
}
.square {
   background: aquamarine url(square.png) no-repeat scroll left bottom;
   /* This is equivalent to the following individual settings:
   background-color: aquamarine;
   background-image: url(square.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: left bottom;*/
}
.triangle {
   background: bisque url(triangle.png) no-repeat local 50px 50px;
   /* This is equivalent to the following individual settings:
   background-color: bisque;
   background-image: url(triangle.png);
   background-repeat: no-repeat;
   background-attachment: local;
   background-position: 50px 50px;*/
}

<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>

The following image shows the result:

Requirements

Minimum supported client

Windows XP

Minimum supported server

Windows Server 2003

Header

 Mshtml.h

IDL

 Mshtml.idl

DLL

 Mshtml.dll