【广州PHP】CSS3 background-size 属性 - 黑马程序员技术交流社区

background-size属性可以指定背景图片大小,这样就可以不需要改变我们的图片大小而通过css样式对背景图片大小进行调节,从而适应我们的需求!

设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type='text/css'>

        div{

            background-repeat: no-repeat;

            background-image:url(images/logo.png);

        }

        div.test{

            background-size: 376px 114px;

        }

    </style>

</head>

<body>

    <div>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

    <hr>

    <div class='test'>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

</body>

</html>

将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type='text/css'>

        div{

            background-repeat: no-repeat;

            background-image:url(images/logo.png);

        }

        div.test{

            background-size: 40% 100%;

        }

    </style>

</head>

<body>

    <div>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

    <hr>

    <div class='test'>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

</body>

</html>

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type='text/css'>

        div{

            background-repeat: no-repeat;

            background-image:url(images/logo.png);

        }

        div.test{

            background-size: cover;

        }

    </style>

</head>

<body>

    <div>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

    <hr>

    <div class='test'>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

</body>

</html>

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type='text/css'>

        div{

            background-repeat: no-repeat;

            background-image:url(images/logo.png);

        }

        div.test{

            background-size: contain;

        }

    </style>

</head>

<body>

    <div>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

    <hr>

    <div class='test'>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit magni, quisquam? Veniam odit iure rem dolores blanditiis repellendus, distinctio? Repudiandae saepe vel vitae cumque nostrum dolore fugit, beatae, architecto soluta. Nulla quas ullam similique esse dolorum, accusantium voluptatem porro laborum optio perspiciatis nesciunt, rerum impedit nihil. Ducimus distinctio rem eos nulla repellat, nesciunt, suscipit veritatis sint quod ipsum et ut alias fuga quo beatae perspiciatis sequi incidunt dolorum, voluptas quam nobis ad voluptate quae perferendis. Saepe natus assumenda iure, dicta aliquid cum animi. Saepe ex ratione dolor officia magni perspiciatis, accusamus natus. Quae, non perspiciatis eveniet aliquid veritatis maxime ea.

    </div>

</body>

</html>