css背景-CSDN博客

本文链接：https://blog.csdn.net/qq_47234456/article/details/118929230

文章目录

CSS的背景

背景颜色

background-color定义元素的背景颜色

默认为透明色transparent

背景图片

background-image:url()描述了元素背景图像

实际开发中常见于logo或一些装饰性的小图片或超大的背景图片

优点是便于控制位置（精灵图）

背景平铺

background-repeat:repeat|no-repeat|repeat-x|repeat-y

默认为平铺|不平铺|沿x轴平铺|沿y轴平铺

页面元素既可以添加背景颜色也可以添加背景图片，背景颜色在底层

背景位置

方位名词

background-position: x y

x坐标和y坐标可以使用方位名词或者核心单位

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致；
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

小背景图demo

h3 {
            width: 118px;
            height: 41px;
            font-size: 14px;
            font-weight: 400;
            /*使文字垂直居中*/
            line-height: 41px;
            background-image: url(image/shouhu.png);
    		/*不重复*/
            background-repeat: no-repeat;
    		/*设置背景图片水平靠左垂直居中*/
            background-position: left center;
    		/*文字空出两格*/
            text-indent: 2em;
}

效果图：

在这里插入图片描述

大背景图demo

    <style>
        body {
            background-image: url(image/主背景.jpg);
            background-repeat: no-repeat;
            background-position: center 40px;
        }
    </style>

效果图：

在这里插入图片描述

精确单位

如果参数值是精确坐标那么第一个肯定是x坐标，第二个一是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着（固定）

background-attachment:scroll |fixed

默认为背景图像随对象内容滚动|背景图像固定

背景是否随着页面其余部分滚动

后期做视差滚动效果

背景复合写法

无固定要求，一般为：

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

背景色半透明

background:rgba(0,0,0,1)

最后一个参数为alpha透明度，在0~1之间

注意：只是让盒子背景色半透明，盒子里的内容不受影响

五彩导航demo

链接属于行内元素，但是此时需要设置宽度高度，因此需要模式转换
里面的文字需要水平居中和垂直居中
链接里面需要设置背景图片
鼠标经过变化背景图片，需要用到链接伪类选择器

    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
            background: url(image/bg1.png);
        }

        .nav a:hover {
            background: url(image/bg11.png);
        }
    </style>

<body>
    <div class="nav">
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>

</body>