CSS background-color, image background image-HTML Tutorial-php.cn

Background-color background-color

Syntax:

background-color:

Default value: transparent Transparent

Applies to : all elements

Inheritance : None

Animation : Yes

Calculated value : Specified value

Value:

: Specify color.

Description:

Set or retrieve the background color of the object.

When both background color and background image are defined, the background image overlays the background color.
If <' background-image '> is set, it is also recommended to set <' background-color '> to maintain a certain contrast with the text color when the background image is invisible.
The corresponding script feature is backgroundColor.

background-image

Syntax:

ground-image ： [ , ]*

= | none

Default value: none

Applies to : all elements

Inheritance: none

animability: no

Calculated value: Specified value

Value:

none: No background image.
: Use absolute or relative addresses or create gradient colors to identify images.

Description:

Set or retrieve the background image of the object.

If <' background-image '> is set, it is also recommended to set <' background-color '> to maintain a certain contrast with the text color when the background image is invisible.
If multiple sets of background images are defined and there is overlap between the background images, the image written in the front will be overlaid on the image written in the back.
The corresponding script feature is backgroundImage.

background-image : url(“http://static.criteo.net/flash/icon/nai_small.png”); // Full URL path

background-image : url(“/flash/icon” /nai_small.png"); // Root path

background-image : url("../nai_small.png") ; // Path relative to css file

background-image : url(../nai_small. png) ; //No quotes

background-image : url('../nai_small.png') ; // Single quotes

Background repeat background-repeat

Syntax:

background-repeat： [ , ]*

= repeat-x | repeat-y | [repeat | no-repeat | Calculate Value : Specify the value Value:

repeat-x: The background image is tiled horizontally repeat-y: The background image is tiled vertically repeat: The background image is tiled horizontally and vertically no- repeat: The background image is not tiled round: The background image automatically scales until it fits and fills the entire container. (CSS3) space: The background image is tiled with the same spacing and fills the entire container or a certain direction. (CSS3)

Description:

Set or retrieve how the object's background image is laid out and filled. The <' background-image '> attribute must be specified first.

Allows 2 parameters to be provided. If all 2 parameters are provided, the first one is used for landscape orientation and the second one is used for portrait orientation.

If only 1 parameter is provided, it is used for landscape and portrait. Except for the special values repeat-x and repeat-y, because repeat-x is equivalent to repeat no-repeat, repeat-y is equivalent to no-repeat repeat, that is, repeat-x and repeat-y are equivalent to providing 2 parameters. The value

corresponds to the script property

backgroundRepeat





The background scrolls with the content background-attachment

Syntax:

background-attachment： [ , ]*

= fixed | scroll | local

Default value : scroll

Applies to : All elements

Inheritance : None

Animation : No

Computed value : Specified value

Value:

fixed: The background image is fixed relative to the form .
scroll: The background image is fixed relative to the element , which means that the background image will not scroll when the element content scrolls, because the background image always follows the element itself. But it will scroll with the element's ancestor element or form.
local: The background image is fixed relative to the element content, which means that when the element scrolls with the element, the background image will also scroll because the background image always follows the content. (CSS3)

Description:

Set or retrieve whether the background image scrolls with the object content or is fixed. The <' background-image '> attribute must be specified first.

The corresponding script feature is backgroundAttachment.

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="utf-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>background-attachment 背景跟着内容动<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span>
<span style="color: #800000; background-color: #f5f5f5">
    .parent</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2000px</span><span style="color: #000000; background-color: #f5f5f5">;</span>
    <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">

    .sample</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
    
        overflow</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> scroll</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 22px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 230px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        border</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2px solid black</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background-image</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> url(red.png)</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        <strong><font style="background-color: #ffff00">background-attachment</font></strong></span><strong><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> <font style="background-color: #ffff00">local</font></span></font><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">;</span></font></strong>
    <span style="color: #000000; background-color: #f5f5f5">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="parent"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sample"</span><span style="color: #0000ff">></span><span style="color: #000000">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

Copy after login