CSS-background样式（二）背景图片background-img的属性

 前言

      各位看官好啊！今天是2024年2月3日，离过年的脚步越来越近。不好意思我又来记录一下我的笔记了，如果我的笔记对你有用的话点赞收藏一下吧，或者关注一下的话我也不会介意。我会持续更新的。每周两篇博客已经列入我的学习计划中。邀请你一起监督我。

        我今天新建了一个群如果你不嫌弃的话我把群号和群二维码放在文章的结尾。你是不是在想这个群是干嘛的。我想回答你这是我想我们在自学前端的小伙伴有问题在群里可以讨论。当然这样的前端群多的是了。但是我想说的是那些群太麻烦了，还有那些群是一些教育机构建的，他们一天给你发广告太烦了。所以就这样。不嫌弃的话欢迎你。

定义和用法

        元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。比如像这样。

                        background-image: url(qq.jpg);

注释：你也可以设置背景再设在设置背景图片万一渲染不上还可以将背景颜色显现出来。比如这样。

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            background-image: url(qq.jpg);
            margin: 100px auto;
        }

   值  

        但你看到这你是否会觉得这不是你想要的结果。亲，先别急哦。接下来我们先看看background有哪些值。看官给我一分钟我用表格的形式来讲一下它的值。他有三个值。

background-img的值

值	解释	代码示例
url()	在括号里面写入图片位置	background-image: url(qq.jpg);
none	是它的默认值，不显示图片的意思	background-image:none;
inherit	继承它爸爸的值	margin: 100px inherit;

图片位置   

        不卖关子了，下面我们来解决背景图片平铺的问题。background-repeat是设置背景平铺的。基本的如下：

            background-repeat: repeat; 
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: no-repeat;

  background-repeat: repeat

   background-repeat: repeat-x

background-repeat: repeat-y

background-repeat: no-repeat

背景图片的位置

        背景图片的位置可以有数字或者百分比或者是方位词。下面我一起来看一下。

            background-repeat: no-repeat;
            background-position: 12px 12px;
            background-position: 50% 50%;
            background-position: center left;

数值确定

百分比确定

方位词确定

背景图片固定位置

            background-attachment: fixed;

 效果如下：

背景图片固定效果

背景图片符合写法

  顺序是：背景颜色         背景图片地址         背景平铺         背景图像滚动         背景图片位置

background: background-color background-image background-repeat background-attachment background-position;

注释：且记写的是不写类名直接写值就行。

QQ群号：749146318                

总结

        我的笔记写到这儿结束了。给大家分享我觉得挺好的一句话。

        早就过了做什么的都要昭告天下的年纪，因此要不动声色地长大。在等待的日子里，刻苦读书，谦卑做人，养得深根，日后才能枝繁叶茂。

        现在学习的我们何尝不是呢。一起加油吧。2024我们来了。