css的背景

最新推荐文章于 2024-04-25 22:42:04 发布

倔强的小白菜

最新推荐文章于 2024-04-25 22:42:04 发布

阅读量326

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47481102/article/details/124401182

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

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

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

1.1 背景颜色

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

background-color :颜色值;

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

1.2 练习

<!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 {
        height: 100px;
        width: 100px;
        /* 没有加背景颜色之前是默认的透明的颜色 即transparent ,相当于如下*/
        background: transparent;
        /* 不想要透明的颜色可修改成其他颜色 ，如下 */
        background: pink;
      }
    </style>
  </head>

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

2.背景图片

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

background-image:none|url（url）;

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

2.1 练习

<!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: 1486px;
            height: 805px;
            /* 背景图片默认无none  添加需要填写url */
            background-image: url(images/background.png);
        }
    </style>
</head>

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

</html>

3.背景平铺

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

backgronund-repeat：repeat | no-repeat | repeat-x | repeat-y

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

3-1 练习

<!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 {
            height: 500px;
            width: 500px;
            /* 背景图片默认平铺  相当于background-repeat: repeat;*/
            background-image: url(images/pingpu.jpg);
            
            /* 1.背景图片平铺设置 */
            /* background-repeat: repeat; */

            /* 2.背景图片不平铺 */
            /* 背景颜色和背景图片是可以一起设置的，只不过背景图片会遮住背景颜色 */
            /* background-repeat: no-repeat; */
            background-color: pink;

            /* 3.背景图片按照x轴平铺 */
            /* background-repeat: repeat-x; */

            /* 4.背景图片按照Y轴平铺 */
            background-repeat: repeat-y;

        }
    </style>
</head>

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

</html>

4.背景图片位置

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

background-position:x y ;

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

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

4.1 参数方位名词

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

4.1.1练习

<!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 {
            /* 设置div的高度和宽度 */
            height: 300px;
            width: 300px;
            /* 背景颜色 */
            background-color: pink;
            /* 背景图片 */
            background-image: url(images/fangwei1-1.jpg);
            /* 背景不平铺 */
            background-repeat: no-repeat;
            /* 语法： background-position: 方位名词 */
            /* 1.如果是方位名词 和方位顺序没有关系 left center和center left效果等价 */
            /* background-position: left center; */
            /* background-position: center left; */

            /* 2.如果只指定了一个方位名词 另一个被忽略 则第二个值默认居中对齐 */
            /* 此时背景图片居中右对齐  第二个参数省略的是y轴，此时y轴是默认居中展示的 */
            /* background-position: right; */
            /* 此时第一个参数是top y轴顶部对齐展示  第二个忽略的是x轴默认居中展示 */
            background-position: top;
        }
    </style>
</head>

<body>

</body>
<div></div>

</html>

4.1.2 背景图片方位名词应用一

设置“守护成长平台”；

<!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 {
            /* 背景颜色方便调试 */
            /* background: pink; */
            width: 118px;
            height: 40px;
            font-size: 14px;
            /* 使标题不加粗 */
            font-weight: 400;
            /* 要使文字在当前盒子内垂直居中，让文字的行高等于盒子的高度 line-height(行高)=height（文字高） */
            line-height: 40px;
            /* 背景图片 */
            background-image: url(images/fangwei.png);
            /* 背景不平铺 */
            background-repeat: no-repeat;
            /* 背景位置  使用背景位置方位名词 */
            background-position: left center;
            /* 文字首行缩进 */
            text-indent: 2em;
        }
    </style>
</head>

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

</html>

4.1.3超大背景图片的应用二

<!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(images/background.png);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

4.2参数是精确单位

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

4.2.1练习

<!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 {
        height: 500px;
        width: 500px;
        background-color: pink;
        background-image: url(images/fangwei1-1.jpg);
        background-repeat: no-repeat;
        /* 背景图片 精确单位坐标 第一个是X轴 第二个是y轴 顺序不变 A B≠B A  */
        /* background-position: 20px 40px; */
        /* background-position: 40px 20px; */

        /* 背景图片 精确单位坐标 如果只写一个 那一定是X轴 Y轴默认为水平居中center */
        background-position: 40px;
      }
    </style>
  </head>

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

4.3参数是混合单位

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

4.3.1练习

<!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(images/fangwei1-1.jpg);
        background-repeat: no-repeat;
        /* 混合单位 第一个参数一定是X轴，第二个参数一定是Y轴 等价于background-position: 20px */
        /* background-position: 20px center; */

        /* 水平居中 垂直20px  混合单位中center 20px ≠ 20px center */
        background-position: center 20px;
      }
    </style>
  </head>

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

4.3.2混合单位应用

<!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(images/background.png);
        background-repeat: no-repeat;
        /* 背景图像固定 */
        background-attachment: fixed;
        background-position: center 40px;
      }
    </style>
  </head>

  <body></body>
</html>

5 背景图像固定（背景附着）

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

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

background-attachment：scroll | fixed

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

5.1练习

<!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(images/background.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-color: black;
        font-size: 20px;
        color: #fff;
        text-indent: 2em;
        /* 背景图片在没有设置固定位置之前是随着对象内容滚动的,默认参数scroll，语法如下： */
        /* background-attachment: scroll; */

        /* 背景图片设置为固定，不会随着对象内容滚动，参数fixed，语法如下 */
        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>
    <p>萤火之旅桑启</p>
    <p>萤火之旅桑启</p>
  </body>
</html>

6 背景复合写法

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中。从而节约代码量，当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

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

background：transparent url（image.jpg） repeat-y fixed top ;

这是实际开发中，更提倡的写法。

6.1练习

<!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(images/background.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-color: black;
            font-size: 20px;
            color: #fff;
            text-indent: 2em;
            background-attachment: fixed;
            
        } */

        /* 实际开发中，为了简化背景属性代码，可以将这些属性合并简写在同一个background中，语法为background：transparent url() repeat-y fixed top  ，如下：*/
        body {
            background: black url(images/background.png) no-repeat center fixed top;
            font-size: 20px;
            color: #fff;
            text-indent: 2em;
        }
    </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>萤火之旅桑启</p>
</body>

</html>

7背景色半透明

css3提供了背景色半透明的效果。

background：rgba（0,0,0,0.3）；

最后一个参数是alpha透明度，取值范围在0~1之间
开发中习惯把0省略，写法为background：rgba（0,0,0,0.3）
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
css3新增属性，是IE9+版本浏览器才支持的
但是现在实际开发中，不太关注兼容性写法了，可以使用

7.1练习

<!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: black; */
            /* 背景颜色可以设置其透明度 */
            /* 语法：background：rgba(0,0,0,aipha透明度取值范围0-1) */
            /* 透明度取值0-1之间，0表示全透明，1表示不透明设置 */
            /* background: rgba(0, 0, 0, 0); */
            /* background: rgba(0, 0, 0, 1); */
            /* 开发中习惯把透明度取值小数前的0省略，如书写为.5 即0.5＝.5 */
            /* background: rgba(0, 0, 0, 0.5); */
            background: rgba(0, 0, 0, .5);

        }
    </style>
</head>

<body>
    <div>测试背景透明是否会影响背景中的内容=》不会</div>
</body>

</html>

倔强的小白菜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css的背景

通过css背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景平铺、背景图片、背景图片位置、背景图片固定等。1.1 背景颜色background-color属性定义了元素的背景颜色。background-color :颜色值;一般情况下背景颜色默认是transparent（透明），可以手动指定背景颜色为透明色。1.2 练习<!DOCTYPE html><html lang="en"> <head> <.
复制链接

扫一扫