零基础学习CSS---05.CSS背景属性详解

已于 2022-10-20 22:46:45 修改
阅读量619 收藏
点赞数
分类专栏： css零基础学习 文章标签： css 学习 css3
于 2022-10-20 22:45:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52136934/article/details/127435424
版权

CSS属性
一、背景属性
1.background-color(背景颜色):red；

2.background-image(背景图片):background-image:url(图片地址);

3.background-repeat(背景图片平铺):no-repeat(不平铺)/repeat(平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)；

4.background-attachment(背景图片的固定):scroll(滚动)/fixed(固定)，固定就是固定在浏览器窗口里面，如果没有设置盒子，在整个页面窗口滑动始终是这个图片，如果设置在盒子里面，那么滑动到下一个盒子的时候就会显示下一个盒子的内容或者下一个盒子没有设置内容,那么就会没有，所以它(fixed)是基于background-image的,(scroll)就是基础的滚动；

5.background-position(图片位置):三种写法：数值，百分比，英文方位(left(左边)/bottom(顶部)/right(右边)/center(中间)/top(顶部)) 比如：background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比;

6.background-size(图片大小):数值，百分比，英文（contain、cover）
比如：
background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 ;
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中;
background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白;

7.background复合书写：复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值(指的颜色)
二、代码演示：
1.background-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /* background-color: yellow;
             */
             /* background-color: rgb(255,0,0); */
             /* background-color: rgba(255,0,0, 0.5);/* backgound-color表示方法 */ 
             background-color: #00ff00;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0.5);/* 0.5百分之五十透明度 */
        }

    </style>
</head>
<body>
    <div class="box1">
        大家好
        <div class="box2">

        </div>
    </div>
</body>
</html>

说明：rgba:red、green、blue、a代表透明的意思；0.5代表透明度为百分之五十。
结果：
在这里插入图片描述
2.background-image、background-reapeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:400px;
            height:400px;
            background-color: yellow;

            /* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */
            background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 */
            /* 写在后面的会掩盖前面写的图片 */
            /* background-repeat: repeat-x;/* 平铺的X轴 */ 
            /* background-repeat:repeat-y; 平铺的y轴*/
            /* background-repeat: no-repeat; */
            /* background-position: 20px 20px;负值会往左,数值可以是百分比 */
            /* background-position: center center; */
            /* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 */
          /*   background-size: cover; */   /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中 */
            /* background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白 */

           
        }
        .box2{
            width: 400px;
            height: 400px;
            background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);
            /* 大的图片盒子太小，只会显示一部分 */
            background-repeat: repeat;/* 默认平铺 */
            /* background-size:400px 400px ; */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

默认平铺结果：
在这里插入图片描述
平铺x轴展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:400px;
            height:400px;
            background-color: yellow;

            /* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */
            background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 */
            /* 写在后面的会掩盖前面写的图片 */
            /* background-repeat: repeat-x;平铺的X轴 
            /* background-repeat:repeat-y; 平铺的y轴*/
            /* background-repeat: no-repeat; */
            /* background-position: 20px 20px;负值会往左,数值可以是百分比 */
            /* background-position: center center; */
            /* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 */
          /*   background-size: cover; */   /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中 */
            /* background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白 */

           
        }
        .box2{
            width: 400px;
            height: 400px;
            background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);
            /* 大的图片盒子太小，只会显示一部分 */
            background-repeat: repeat;/* 默认平铺 */
            /* background-size:400px 400px ; */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

结果：
在这里插入图片描述
读者可以自行试一下y轴；
3.background-position、background-size(图片大小)
background-position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:400px;
            height:400px;
            background-color: yellow;

            /* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */
            background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 */
            /* 写在后面的会掩盖前面写的图片 */
           /* background-repeat: repeat-x;  */  /*  平铺的X轴  */
            /* background-repeat:repeat-y; 平铺的y轴*/
            background-repeat: no-repeat;
            /* background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比 三种写法：1.数值，百分比，英文方位*/
            background-position: center center;
            /* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 同上三种写法 */
            /* background-size: cover; */    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中*/
             /* background-size: contain;   */      /*  把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白  */

            
        }
        .box2{
            width: 400px;
            height: 400px;
            background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);
            /* 大的图片盒子太小，只会显示一部分 */
            background-repeat: repeat;/* 默认平铺 */
            /* background-size:400px 400px ; */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

结果:
在这里插入图片描述
background-size
我会演示三种表现图片，但只会给一份代码，其他的可以去掉注释自行运算
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:400px;
            height:400px;
            background-color: yellow;

            /* background-image:url(../9BEBDEDA925B7017F50910F191E0362F.jpg); */
            background-image:url(../img/1.jpg);/* 默认平铺，小的图片会复制成好几份然后铺满整个 */
            /* 写在后面的会掩盖前面写的图片 */
           /* background-repeat: repeat-x;  */  /*  平铺的X轴  */
            /* background-repeat:repeat-y; 平铺的y轴*/
            background-repeat: no-repeat;
            /* background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比 三种写法：1.数值，百分比，英文方位*/
            /* background-position: center center; */
            /* background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 同上三种写法 */
            /* background-size: cover; */    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中*/
             /* background-size: contain;   */      /*  把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白  */

            
        }
        .box2{
            width: 400px;
            height: 400px;
            background-image: url(../70A523A143C73657A5371964059B1D3F.jpg);
            /* 大的图片盒子太小，只会显示一部分 */
            background-repeat: repeat;/* 默认平铺 */
            /* background-size:400px 400px ; */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

数值结果：
在这里插入图片描述
contain结果:
在这里插入图片描述
cover结果:
在这里插入图片描述
4.background-attachment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 1000px;
        }
        .box1{
            background-image: url(../img/2.jpg);
            background-attachment: fixed;/*  background-attachment*/
            background-repeat: no-repeat;
            background-color: yellow;
        }
        .box2{

            /* background-image: url(../img/1.jpg); */
            background-attachment: fixed;/* 根据盒子的范围来显示的 */
            background-repeat: no-repeat;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

结果读者可以自己运行，因为设计到滚动不好截图，如下：
在这里插入图片描述
在这里插入图片描述
5.background复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box2{
            width:600px;
            height: 600px;
            /*  background-color: aqua;
            background-image: url(../img/0.jpg);
            background-repeat: no-repeat;
            background-attachment:fixed;
            background-position: center;/* fixed是整个窗口，而且为我们设置盒子在中间(center)，所以显示不出来 */ 
            background: yellow url(../img/0.jpg) no-repeat center fixed;/* 复合写法 */
            /* background-size: ; 不能复合使用 */
        }/* 复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值 */
        .box1{
            width: 300px;
            height: 300px;
            background-color: yellow;
            background: url(../img/0.jpg)  no-repeat center top;/* center top位置不能瞎写，位置不能更换，后面的颜色默认是白色，会覆盖前面的值 */
        }
    </style>
</head>
<body>
    <div class="box2"></div>
    <div class="box1"></div>
</body>
</html>
<!-- background复合写法 -->

结果：
在这里插入图片描述
注意：复合写法的时候一定要注意，不然容易搞错，你看上面的代码，一个标准的复合写法，另一个简写就出现了问题，默认的白色覆盖了设置的黄色。
总结：
这一节我们学习了CSS背景属性：
1.background-color(背景颜色):red；

2.background-image(背景图片):background-image:url(图片地址);

3.background-repeat(背景图片平铺):no-repeat(不平铺)/repeat(平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)；

4.background-attachment(背景图片的固定):scroll(滚动)/fixed(固定)，固定就是固定在浏览器窗口里面，如果没有设置盒子，在整个页面窗口滑动始终是这个图片，如果设置在盒子里面，那么滑动到下一个盒子的时候就会显示下一个盒子的内容或者下一个盒子没有设置内容,那么就会没有，所以它(fixed)是基于background-image的,(scroll)就是基础的滚动；

5.background-position(图片位置):三种写法：数值，百分比，英文方位(left(左边)/bottom(顶部)/right(右边)/center(中间)/top(顶部)) 比如：background-position: 20px 20px;这两个值分别表示距离左边和距离上边的距离。左负值会往左,数值可以是百分比;

6.background-size(图片大小):数值，百分比，英文（contain、cover）
比如：
background-size: 400px 400px ;修改图片大小 100% 100%可以改成一样的 ;
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中;
background-size: contain;把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白;

7.background复合书写：复合写法：空格隔开，顺序可以换，可以只去一个值，放在后面能覆盖前面的值(指的颜色)，center top位置不能乱写，要小心复合的写法容易出错

最后放置一个有意思的页面背景background-attachment/background-position/background-size的应用,很漂亮好玩哦，我会放置背景图片和代码放在下面，读者自取即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 780px;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
      .box1{
            background-image: url(../img/bg1.png);
            background-position: center;
            background-size: cover;
        }
        .box2{
            background-image: url(../img/bg2.png);
            background-position: center;
            background-size: cover;
        }
        .box3{
            background-image: url(../img/bg3.png);
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

吃烤肉的小飞飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS 常用样式background背景属性
猿码互联
10-12 5326
一、背景颜色 background-color一、背景颜色 background-colorCSS中的background-color是用来设置HTML元素的背景颜色的一个属性。它可以接受各种颜色值，包括具有名称的颜色和十六进制颜色值。以下是一些示例代码：在上面的代码中，background-color属性的值是用来定义HTML元素的背景颜色的。在第一个例子中，背景颜色被设置为红色。在第二个例子中，背景颜色被设置为十六进制颜色值。
CSS —— background 背景
藜笙的博客
02-28 829
<!--背景：背景支持为元素添加背景颜色和背景图片，接下里介绍背景相关的属性。 ①background-color:背景颜色。 CSS代码 ： <style> #box{ width:200px; height: 200px; background-color:red; } ...
css背景属性
ssjjrr的博客
09-30 3333
css背景属性
最详细的CSS常用背景属性总结（background-color、background-image、background-repeat、background-position等）
热门推荐
weixin_56242678的博客
05-21 1万+
由于自己在学习CSS的过程中会时不时忘记一些CSS背景样式的书写，因此在本文记录了一些常用的CSS背景样式的写法。以上就是有关常用背景样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。
css background背景详解
最新发布
2401_84091321的博客
05-10 838
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-rcY3MY2a-1715316958942)]
CSS-常用样式-–-背景属性，开发8年的老前端才知道
2401_84023579的博客
04-04 1694
背景颜色。
前端学习day06-CSS盒子模型-CSS设置背景
qq_39416206的博客
02-03 150
CSS盒子模型-CSS设置背景
前端学习笔记day04-CSS文本属性-CSS字体属性-CSS选择器
qq_39416206的博客
01-30 125
前端学习-css笔记
css-sprite使用详解
09-25
首先，你需要安装`css-sprite`工具，这是一个用于自动化生成雪碧图和对应的CSS样式的库。在命令行中，你可以通过npm（Node.js包管理器）进行安装： ```bash npm install css-sprite ``` 如果你的项目使用Gulp作为...
CSS中clip-path属性的使用详解
12-14
【CSS中的clip-path属性详解】 `clip-path`属性在CSS中是一个非常强大的工具，用于剪裁元素的内容区域，展示特定形状的部分。它允许开发者通过指定的几何形状来裁剪元素，创造出富有创意的布局和设计效果。在本篇...
css详解box-sizing.zip
01-06
综上所述，"css详解box-sizing.zip"这个压缩包是一个全面学习和理解CSS Box Sizing特性的资源集合，包括了理论解释、实例演示和相关联的CSS属性，对于想要深入掌握CSS布局的开发者来说非常有价值。通过这些资料，...
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
CSS3 box-shadow属性实例详解
01-21
CSS3 –添加阴影（盒子阴影的使用） CSS3 – 给div或者文字添加阴影（盒子阴影、文本阴影的使用） CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。...
CSS背景属性和盒子模型
2302_80088975的博客
03-17 972
css背景，盒子模型相关知识
CSS 的背景属性（开发中常用）
smilehjl
12-12 538
 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致。把表格中的五个属背下来，然后写一下练习关于css的背景属性应该就有大概的了解了，但还是的在实践中加深巩固。 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标。 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。1. 参数是方位名词。2. 参数是精确单位。
css笔记：（背景相关的属性）
l_al_al_a的博客
03-16 895
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）/* rgba红绿蓝三原色，a是透明度(范围在0~1之间) *//* 不分先后顺序：背景色 背景图 背景图平铺 背景图位置 *//* 图片向左移动100px，图片向上移动100px *//* 背景图位置如果是用数值表示，不要颠倒顺序 *//* 图片向右移动10px，向下移动10px */负数：向左向上移动 *//* 不平铺：图片只显示一个（工作中常用） *//* 注意：背景色和背景图只显示在盒子里面 */
css 背景属性
gl6557的博客
01-18 75
背景属性
css之背景属性
2301_80138597的博客
03-25 446
若设置的宽高超过图片本身,则会出现重复图片.所以,我们需要用repeat来设置图片是否重复,详看跳转目录4)--div为一个单纯的容器标签,没有内容样式和效果,只为了创造容器去存放内容 -->background-image:url("图片路径");用left-center渲染图片:只会选择图片的左中部分。5)background-size:设置背景图片大小属性。length:设置图片的宽高(宽度,高度)要确认图片已保存在编辑器里!要确认图片已保存在编辑器里!要确认图片已保存在编辑器里!
css如何让图片不平铺,css怎么设置图片背景不平铺？
weixin_39942318的博客
08-03 1617
css可以为图片背景设置background-repeat:no-repeat样式实现图片背景不平铺，background-repeat属性定义了图像的平铺模式。css可以设置图片背景background-repeat:no-repeat样式实现图片背景不平铺，background-repeat属性定义了图像的平铺模式。css可以使用background-repeat属性设置图片背景不平铺。从原图...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值