图像

background-repeat属性可选用以下四个值中的一个:

repeat背景图像在水平方向和垂直方向上都进行重复(这也是背景图像在background-repeat属性未被指定时的默认显示方式)。

repeat-x背景图像只在水平方向上进行重复(如左侧的第一个示例所示)。

repeat-y背景图像仅在垂直方向上重复。

no-repeat背景图像只显示一次。

background-attachment属性用于指定背景图像在用户滚动页面时的移动方式,是位置固定不变,还是随页面滚动。它可以选用以下两个值中的一个:

fixed背景图像固定在页面中的一个位置。

scrol1背景图像随用户上下滚动页面而上下移动。

background-position

如果背景图像不进行重复,你可以使用background-position属性来指定背景图像在浏览器窗口中的位置。该属性通常会有一对值。第一个值表示水平位置,第二个值表示垂直位置。

left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

如果只指定一个值,那么第二个值默认为center.

还可以使用一对像素值或者一对百分数。这些值表示与浏览器窗口(或是包含盒子)左上角的距离。左上角相当于0%0%。本页的示例中显示,使用50%50%可使图像在水平和垂直方向上都居中。

background属性就像前面介绍的其他所有背景属性以及background-color属性的简写形式。

该属性必须按照以下顺序来指定,但如果不想指定某个属性,可将其忽略。

1)background-color
(2)background-image
(3)background-repeat
(4)background-attachment
(5)background-position

CSS3还会支持重复使用background简写,以此来应用多个背景图像。
div {
background:
url(example-1.jpg)
no-repeat top left,
url(example-2.jpg)
no-repeat bottom left,
ur1(example-3.jpg)
repeat-x center top:}

用CSS来设置图像的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS设置图片大小</title>
    <style type="text/css">
        img.large{
             500px;
            height: 500px;}
        img.medium{
             250px;
            height: 250px;}
        img.small{
             100px;
            height: 100px;}
    </style>
</head>
<body>
<img src="images/magnolia-large.jpg" class="large" alt="Magnolia">
<img src="images/magnolia-medium.jpg" class="medium" alt="Magnolia">
<img src="images/magnolia-small.jpg" class="small" alt="Magnolia">
</body>
</html>

  

使用CSS将图片对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS将图片对齐</title>
    <style type="text/css">
        body{
            font-family: Georgia, "Times New Roman", Serif;
            color: #665544;}
        img.align-left{
            float: left:
            margin-right: 10px;}
        img.align-right{
            float: right;
            margin-left: 10px;}
        img.medium{
             250px;
            height: 250px;}
    </style>
</head>
<body>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-left medium" /><b><i>Magnolia</i></b>
    is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and
    , having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-right medium" />Some magnolias, such as
    <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open.
    Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>
</body>
</html>

  

使用CSS将图片居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS将图片居中</title>
    <style type="text/css">
        body{
            font-family: Georgia, "Times New Roman", Serif;
            color: #665544;}
        img.align-center{
            display: block;
            margin: 0px auto;}
        img.medium{
             250px;
            height: 250px;}
    </style>
</head>
<body>
<p><img src="images/magnolia-medium.jpg" alt="Magnolia" class="align-center medium" />
    <b><i>Magnolia</i></b> is a large genus that contains over 200 flowering plant species.
    It is named after French botanist Pierre Magnol and, having evolved before bees appeared,
    the flowers were developed to encourage pollination by beetle.</p>
</body>
</html>

  

背景图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像</title>
    <style type="text/css">
    body{
        background-image: url("images/pattern.gif");
        color: white;
        padding: 20px;}
    </style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>,
    is a tree of the family Magnoliaceae native to the southeastern United States,
    from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma.
    Reaching 27.5 m (90 ft) in height,
    it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers.
    Widely cultivated around the world,
    over a hundred cultivars have been bred and marketed commercially.
    The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i>
</b> is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia,
    southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa.
    It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems.
    The basal leaves are three-lobed, with leaves higher on the stems more deeply divided;
    like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink,
    yellow, or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i>
</b> is a plant belonging to the family of Liliaceae. This species has uncertain origins,
    possibly from Asia, and has become naturalised in south-west Europe.
    Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana.
    The flower and bulb can cause dermatitis through the allergen,
    tuliposide A, even though the bulbs may be consumed with little ill-effect.
    The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost,
    and can tolerate temperatures well below freezing - a period
    of low temperature is necessary to induce proper growth and flowering,
    triggered by an increase in sensitivity to the phytohormone auxin.
    The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>

  

重复图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重复图像</title>
    <style type="text/css">
        body{
            background-image: url("images/header.gif");
            background-repeat: repeat-x;
            color: #665544;
            padding: 20px;}
        h1{
            color: white;}
    </style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b>
    or <b>bull bay</b>, is a tree of the family Magnoliaceae native to the southeastern United States,
    from coastal Virginia south to central Florida,
    and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height,
    it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers.
    Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially.
    The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b>
    is a species of buttercup (Ranunculus) native to the eastern Mediterranean region in southwestern Asia,
    southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa.
    It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems.
    The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems,
    they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow,
    or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae.
    This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe.
    Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana.
    The flower and bulb can cause dermatitis through the allergen, tuliposide A,
    even though the bulbs may be consumed with little ill-effect.
    The sweet-scented bisexual flowers appear during April and May.
    Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period
    of low temperature is necessary to induce proper growth and flowering,
    triggered by an increase in sensitivity to the phytohormone auxin.
    The bulbs may be dried and pulverised and added to cereals or flour.</p>
    The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>

  

背景图片定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像定位</title>
    <style type="text/css">
        body{
            background-image: url("images/tulip.gif");
            background-repeat: no-repeat;
            background-position: center top;
            color: #665544;
            padding: 20px;}
    </style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>,
    is a tree of the family Magnoliaceae native to the southeastern United States,
    from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma.
    Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree
    with large dark green leaves and large white fragrant flowers.
    Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially.
    The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native
    to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes),
    and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems.
    The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems,
    they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white,
    with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae.
    This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe.
    Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana.
    The flower and bulb can cause dermatitis through the allergen,
    tuliposide A, even though the bulbs may be consumed with little ill-effect.
    The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost,
    and can tolerate temperatures well below freezing - a period of low temperature is necessary
    to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin.
    The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>

  

简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简写</title>
    <style type="text/css">
        body{
            background: #ffffff url("images/tulip.gif") no-repeat top right;
            color: #665544;
            padding: 20px;}
    </style>
</head>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p><b><i>Magnolia grandiflora</i></b>, commonly known as the <b>Southern magnolia</b> or <b>bull bay</b>,
    is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south
    to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height,
    it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers.
    Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially.
    The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer.</p>
<h2>Ranunculus</h2>
<p><b><i>Ranunculus asiaticus (Persian Buttercup)</i></b> is a species of buttercup (Ranunculus) native
    to the eastern Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes),
    and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple
    or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided;
    like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow,
    or white, with one to several flowers on each stem.</p>
<h2>Tulip</h2>
<p><b><i>Tulipa gesneriana L. or "Didier's tulip"</i></b> is a plant belonging to the family of Liliaceae.
    This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe.
    Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana.
    The flower and bulb can cause dermatitis through the allergen,
    tuliposide A, even though the bulbs may be consumed with little ill-effect.
    The sweet-scented bisexual flowers appear during April and May.
    Bulbs are extremely resistant to frost,
    and can tolerate temperatures well below freezing - a period of low temperature is necessary
    to induce proper growth and flowering, triggered by an increase in sensitivity
    to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour.</p>
</body>
</html>

  

原文地址:https://www.cnblogs.com/max-hou/p/8604937.html