背景相关属性设置

最新推荐文章于 2023-08-21 15:29:08 发布

小豪boy

最新推荐文章于 2023-08-21 15:29:08 发布

阅读量977

点赞数

分类专栏： CSS3学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120013570

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

background-color属性

background-color属性表示背景颜色。
背景颜色可以用十六进制、rgb()、rgba()表示法表示。
padding区域是有背景颜色的。

background-image属性

background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。
background-image: url(images/bg1.jpg); 
如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发。

background-repeat属性

background-repeat属性用来设置背景的重复模式。

值意义
repeat; x、y均平铺（默认）
repeat-x; x平铺
repeat-y; y平铺
no-repeat; 不平铺

值	意义
repeat;	x、y均平铺（默认）
repeat-x;	x平铺
repeat-y;	y平铺
no-repeat;	不平铺

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .div1 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            background-repeat: repeat-x;
            margin-bottom: 30px;
        }
        
        .div2 {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <!-- 背景图片的重复模式 -->
    <div class="div1">x平铺</div>
    <div class="div2">y平铺</div>
</body>

</html>

background-size属性

background-size属性用来设置背景图片的尺寸，兼容到IE9。
/* 100px 200px分别代表宽度和高度 */
background-size: 100px 200px;
值也可以用百分数来设置，表示为盒子宽、高的百分之多少。
需要等比例设置的值，写auto。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .div1 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            /* 自定义宽高可能会导致背景图片的形状发生变化 */
            background-size: 100px 200px;
            margin-bottom: 30px;
        }
        
        .div2 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            /* 根据宽度等比例的设置高度，不会改变背景图片的形状 */
            background-size: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 背景尺寸的设置 -->
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

contain和cover

contain和cover是两个特殊的background-size的值。
contain表示将背景图片智能改变尺寸以容纳到盒子里。
cover表示将背景图片智能改变尺寸以撑满盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .div1 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            margin-bottom: 30px;
            /* 等比例放缩背景图片，直到图片的宽度或者高度能够撑满父盒子 */
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        .div2 {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #000;
            background-image: url(image/weiqu.jpg);
            /* 等比例放缩背景图片，直到图片的宽度和高度能够同时撑满父盒子 */
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <!-- 背景尺寸的设置 -->
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

background-clip属性

background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。

值意义
border-box 背景延伸至边框（默认值）
padding-box 背景延伸至内边（padding），不会绘制到边框处（仅在dotted、dashed边框可察觉）
content-box 背景被裁剪至内容区

值	意义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边（padding），不会绘制到边框处（仅在dotted、dashed边框可察觉）
content-box	背景被裁剪至内容区

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            padding: 50px;
            margin: 30px;
            border: 20px dotted #000;
            background-image: url(image/kda.jpg);
            background-size: 200px auto;
        }
        
        .div1 {
            /* 背景延伸至边框（默认值） */
            background-clip: border-box;
        }
        
        .div2 {
            /* 背景延伸至内边（padding），不会绘制到边框处（仅在dotted、dashed边框可察觉） */
            background-clip: padding-box;
        }
        
        .div3 {
            /* 背景被裁剪至内容区 */
            background-clip: content-box;
        }
    </style>
</head>

<body>
    <!-- 背景裁剪 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

</html>

背景固定

background-attachment 属性决定背景图像的位置是在视窗内固定，或者随着包含它的区块滚动。

值意义
fixed 自己滚动条不动，外部滚动条不动
local 自己滚动条动，外部滚动条动
scroll 自己滚动条不动，外部滚动条动（默认值）

值	意义
fixed	自己滚动条不动，外部滚动条不动
local	自己滚动条动，外部滚动条动
scroll	自己滚动条不动，外部滚动条动（默认值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            float: left;
            width: 260px;
            height: 300px;
            margin: 10px;
            border: 1px dashed #000;
            background-image: url(image/weiqu.jpg);
            /* 超出部分用滚动条拖拽 */
            overflow-y: scroll;
        }
        
        .div1 {
            /* 自己滚动条不动，外部滚动条不动 */
            background-attachment: fixed;
        }
        
        .div2 {
            /* 自己滚动条动，外部滚动条动 */
            background-attachment: local;
        }
        
        .div3 {
            /* 自己滚动条不动，外部滚动条动（默认值） */
            background-attachment: scroll;
        }
    </style>
</head>

<body>
    <!-- 背景固定 -->
    <div class="div1">
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
        <p>fixed</p>
    </div>
    <div class="div2">
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
        <p>local</p>
    </div>
    <div class="div3">
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
        <p>scroll</p>
    </div>
</body>

</html>

背景图片位置

background-position属性。
background-position属性可以设置背景图片出现在盒子的什么位置。
background-position: 100px 200px; 
可以用top、bottom、center、left、right描述图片出现的位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 1px dashed #000;
            background-image: url(image/kda.jpg);
            background-size: 100px auto;
            background-repeat: no-repeat;
        }
        
        .div1 {
            /* 上左 */
            background-position: top left;
        }
        
        .div2 {
            /* 下右 */
            background-position: bottom right;
        }
        
        .div3 {
            /* 正中 */
            background-position: center center;
        }
        
        .div4 {
            /* 自定义位置 */
            background-position: 50px 100px;
        }
    </style>
</head>

<body>
    <!-- 背景位置 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

</html>

CSS精灵

CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图。
CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        b {
            position: absolute;
            top: 6px;
            left: 10px;
            /* 小图标的大小 */
            width: 21px;
            height: 11px;
            /* 素材图标的完整图 */
            background-image: url(image/sprites.png);
            /* 需要图标的位置 */
            background-position: 0 -2193px;
        }
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        li {
            position: relative;
            padding-left: 35px;
        }
    </style>
</head>

<body>
    <!-- CSS精灵 -->
    <ul>
        <li><b></b>CSS精灵</li>
        <li><b></b>CSS精灵</li>
        <li><b></b>CSS精灵</li>
        <li><b></b>CSS精灵</li>
    </ul>
</body>

</html>

background综合属性

一些常用的背景相关小属性，可以合写到一条background属性中。
/* 依次是背景颜色、背景图片、背景重复、背景位置 */
background: white url(images/archer.png) no-repeat center center;

小豪boy

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
背景相关属性设置

background-color属性background-color属性表示背景颜色。背景颜色可以用十六进制、rgb()、rgba()表示法表示。 padding区域是有背景颜色的。background-image属性background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。background-image: url(images/bg1.jpg);如果样式表是外链的，那么要书写从CSS出..
复制链接

扫一扫