CSS学习（三）- CSS背景

最新推荐文章于 2024-07-13 11:50:40 发布

YBNO1

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量854

点赞数 15

分类专栏：前端学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/weixin_56656559/article/details/135401909

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的背景属性，包括背景颜色、背景图片、平铺方式、图片位置、图像固定、复合写法以及半透明背景。通过实例演示了如何在五彩导航中灵活运用这些背景设置。

摘要由CSDN通过智能技术生成

一、CSS背景

1、背景颜色 - background-color

2、背景图片 - background-image

3、背景平铺 - background-repeat

4、背景图片位置 - background-position

（1）参数是方位名词

（2）参数是精确单位

（3）参数是混合单位

5、背景图像固定（背景附着） - background-attachment

6、背景复合写法 - background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

7、背景色半透明 - background: rgba(0, 0, 0, 0.3);

8、背景总结

9、背景图片综合案例：五彩导航

一、CSS背景

1、背景颜色 - background-color

background-color: 颜色值;

一般情况元素背景颜色默认是transparent（透明），也可以手动定义背景颜色为透明。

2、背景图片 - background-image

background-image: none | url(url);

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

3、背景平铺 - background-repeat

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

参数值	作用
repeat	背景图像横向、纵向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像横向平铺
repeat-y	背景图像纵向平铺

注：背景图片压在背景颜色上。

4、背景图片位置 - background-position

background-position: x y;

参数x、y代表x坐标和y坐标。可以使用方位名词或精确单位。

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

（1）参数是方位名词

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

背景位置案例1：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景位置案例1</title>
    <style>
        h3 {
            display: block;
            width: 118px;
            height: 40px;
            font-weight: 400;
            font-size: 14px;
            /* background-color: rgb(238, 153, 74); */
            background-image: url(title_sprite.png);
            background-repeat: no-repeat;
            background-position: left;
            line-height: 40px;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>成长守护平台</h3>
</body>

</html>

背景位置案例2：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景位置案例2</title>
    <style>
        body {
            background-image: url(background2.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

（2）参数是精确单位

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

（3）参数是混合单位

两个参数，第一个值代表x方向，第二个值代表y方向。

5、背景图像固定（背景附着） - background-attachment

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll | fixed;

参数	作用
scroll	默认，背景图像是随对象内容滚动的
fixed	背景图像固定

6、背景复合写法 - background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

没有特定书写顺序，属性之间用空格隔开，一般习惯书顺序：

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

7、背景色半透明 - background: rgba(0, 0, 0, 0.3);

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha透明度，取值范围在0~1之间。
习惯把0.3的0省略掉，写为background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里的内容不受影响。
CSS3新增属性，IE9+版本浏览器才支持。实际开发不太关注，可以用。

8、背景总结

9、背景图片综合案例：五彩导航

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例之五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            color: #fff;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }

        .nav .one {
            background: url(images/bg3.png) no-repeat;
        }

        .nav .one:hover {
            background: url(images/bg4.png) no-repeat;
        }

        .nav .two {
            background: url(images/bg11.png) no-repeat;
        }

        .nav .two:hover {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .three {
            background: url(images/bg5.png) no-repeat;
        }

        .nav .three:hover {
            background: url(images/bg1.png) no-repeat;
        }
    </style>
</head>

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

</html>

YBNO1

关注

15
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（三）- CSS背景

综合案例之五彩导航.nav a {<a href="#" class="one">五彩导航</a><a href="#" class="two">五彩导航</a><a href="#" class="three">五彩导航</a></div>
复制链接

扫一扫