前端CSS的背景设置及CSS的三大特性

Posted 2022-07-13 程序喵正在路上

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端CSS的背景设置及CSS的三大特性相关的知识，希望对你有一定的参考价值。

🔥 信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🦄 本文由程序喵正在路上原创，CSDN首发！
💖 系列专栏：HTML5+CSS3+移动端前端
🌠 首发时间：2022年7月10日
✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

阅读指南

学习目标
CSS 的背景
背景颜色
背景图片
背景平铺
背景图片位置
背景图像固定
背景属性复合写法
背景颜色半透明
背景总结

案例：五彩导航
CSS 的三大特性
层叠性
继承性
优先级

学习目标

✅ 能够写出背景图片的设置方式
✅ 能够计算 CSS 的权重

CSS 的背景

通过 CSS 背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

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

语法格式

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色

背景图片

background-image 属性描述了元素的背景图像，实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

语法格式

background-image: none | url(图片的地址)

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

<!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>背景图片</title>
    <style>
        div 
            width: 1688px;
            height: 880px;
            background-image: url(https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20220623/16559919637365.jpg);
        
    </style>
</head>

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

</html>

背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性

语法格式

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

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

背景图片位置

利用 background-position 属性可以改变图片在背景中的位置

语法格式

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标，可以使用方位名词或者精确单位

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

——参数是方位名词
● 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

<!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>背景位置-方位名词</title>
    <style>
        div 
            width: 500px;
            height: 400px;
            background-color: skyblue;
            background-image: url(logo.png);
            background-repeat: no-repeat;
            /* background-position: top center; */
            background-position: left center;
        
    </style>
</head>

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

</html>

● 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐，所以 background-position: left; 等价于 background-position: left center;

<!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>背景位置方位名词应用一</title>
    <style>
        h3 
            width: 228px;
            height: 41px;
            background-color: skyblue;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(title_sprite.png);
            background-repeat: no-repeat;
            background-position: left;
            text-indent: 9em;
        
    </style>
</head>

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

</html>

<!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>背景位置方位名词应用二</title>
    <style>
        body 
            background-image: url(bgimg.jpg);
            background-repeat: no-repeat;
            background-position: top;
        
    </style>
</head>

<body>

</body>

</html>

——参数是精确单位
● 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标
● 如果只指定一个数值，那该数值一定是 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>背景图片-精确单位</title>
    <style>
        div 
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(logo.png);
            background-repeat: no-repeat;
            background-position: 20px 50px;
        
    </style>
</head>

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

</html>

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

背景图像固定

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

background-attachment 后期可以制作视差滚动的效果

语法格式

background-attachment: scroll | fixed

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

<!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>背景固定</title>
    <style>
        body 
            background-image: url(https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20220707/16571822814730.jpg);
            background-repeat: no-repeat;
            background-position: top;
            color: #fff;
            font-size: 20px;
            /* 固定背景图片 */
            background-attachment: fixed;
        
    </style>
</head>

<body>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
    <p>原来钢铁之心，也会梦见冬日的炉火</p>
</body>

</html>

背景属性复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

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

background: transparent url(image.jpg) repeat-y fixed top;

这是实际开发中我们更提倡的写法

<!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>背景属性复合写法</title>
    <style>
        body 
            background: black url(bgimg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        
    </style>
</head>

<body>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</p>
    <p>衣带渐宽终不悔，为伊消得人憔悴</pcss的三个特性 背景透明设置
 沉淀期——css三大特性
 〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景
 详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记
 详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记
 CSS基础知识二复合选择器元素显示模式背景三大特性注释