乐趣区

CSS3-backgroundsize-属性

jiezi

CSS3 background-size 属性
background-size 属性可以指定背景图片大小, 这样就可以不需要改变我们的图片大小而通过 css 样式对背景图片大小进行调节, 从而适应我们的需求!
取值:length
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
[HTML] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
效果

percentage
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 ”auto(自动)”
[HTML] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>

效果


cover
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
[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>
效果

contain
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
[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>
效果:

更多技术资讯

退出移动版