CSS常用属性-3.5背景-1.background-color-2.background-image-3.-repeat-4.-position-5.-attachment-6.background

最新推荐文章于 2024-05-08 15:26:56 发布

say hi.

最新推荐文章于 2024-05-08 15:26:56 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108183737

版权

1.background-color
用来设置元素的背景颜色
默认值为 transparent（透明的）
3种方式直接设置颜色颜色名、十六进制颜色、rgb函数
颜色名red、十六进制颜色 #ff0000、rgb函数rgb(255,0,0)

2.background-image
通用来设置元素的背景图片
默认值 none
还可以设置一个图片的url地址，来作为背景图片

3.background-repeat（平铺）(像铺地板，会铺出好几个，铺满)
主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式（默认X Y 双向平铺）
默认值为 repeat 表示将背景图片在x轴和y轴方向平铺显示
还可以设置为沿X轴平铺（repeat-x）、沿Y轴平铺（repeat-y）、不平铺（no-repeat）
4.background-position
也是用来配合bockground-image属性一起使用的，用来设置背景图片的起始点位置
默认为div左上角零点位置
位置参数 X轴方向left、center、right
Y轴方向top、center、bottom
百分比 X轴位置x% Y轴位置y%
长度 X轴离原点长度、Y轴离原点长度

例如：
background-position: right ;【省略一个则省略的那一个默认居中】

5.background-attachment
用于设置背景图片固定或者跟随页面滚动
默认值 scroll（滚动）
还可以设置为fixed（固定）【使用较少】

6.background
属性简写
background=background-color+background-image+background-repeat+background-position+background-attachment
可以全部设置，也可以省略其中几项

简写属性的共性：1.简写属性的属性之间用空格进行分隔
2.可以全部设置，也可以省略其中几项

小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景属性</title>
    <style>
        .bak {
            height: 1000px;
            background-color:rgb(255, 0, 0);
            /* background-image: 
            这个属性，会针对div的区域大小，双向(横纵)的平铺(像铺地板，会铺出好几个，铺满)背景图片 
            如果不想让其平铺，那就用background-repeat:no-repeat; 设置一下就好了*/
            background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=34340744,920267951&fm=26&gp=0.jpg");
            background-repeat: no-repeat; 
            /* background-repeat: repeat-x; */

            background-position: right ;  /* 省略一个则省略的那一个默认居中 */
            background-position: 50% 50%; /* 背景图片，在整个div内居中 */
            /* background-position: 100px 100px; */

            /* background-attachment: fixed; */

            /* background: url("background-image.png") red no-repeat center center; */

        }
    </style>
</head>
<body>
    <div class="bak"></div>
</body>
</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用属性-3.5背景-1.background-color-2.background-image-3.-repeat-4.-position-5.-attachment-6.background

1.background-color用来设置元素的背景颜色默认值为 transparent（透明的）3种方式直接设置颜色颜色名、十六进制颜色、rgb函数颜色名red、十六进制颜色 #ff0000、rgb函数rgb(255,0,0)2.background-image通用来设置元素的背景图片默认值 none还可以设置一个图片的url地址，来作为背景图片3.background-repeat（平铺）主要用来配合background-image属性一起使用，用来设置背景图片的平铺方式（默认
复制链接

扫一扫