12、背景

最新推荐文章于 2022-03-18 08:52:21 发布

青叶的全栈之路

最新推荐文章于 2022-03-18 08:52:21 发布

阅读量164

点赞数

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

本文链接：https://blog.csdn.net/dream_AI/article/details/107143385

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

背景

背景

一、背景

background-color：背景色
background-img：背景图片
background-repeat：平铺
background-attachment：图像固定
background-size：图像大小

1.1、背景色（background-color）

语法：background-color:transparent | color;

transparent：透明色（默认）
color：支持颜色名（英文）、rgb、十六进制

<!--案例-->
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

div{
    width:200px;
    height: 100px;
}
#div1{
    background-color: red;/*红色*/
}
#div2{
    background-color: #008000;/*绿色*/
}
#div3{
    background-color: rgb(0,0,255);/*蓝色*/
}

在这里插入图片描述

1.2、背景图片（background-img）

语法：background-img:none | url();

none：没有背景图片（默认）
url()：设置背景图片的路径

<!--案例-->
<body>
    <div></div>
</body>

div{
    width:500px;
    height: 250px;
    border:1px solid red;
    background-image: url("../img/提交按钮.png");
}

在这里插入图片描述

1.3、背景平铺（background-repeat）

语法：background-repeat:repeat | no-repeat | repeat-x | repeat-y;

repeat：沿横轴和纵轴平铺（默认）
repeat-x：沿横轴平铺
repeat-y：沿纵轴平铺
no-repeat：不平铺

<!--案例-->
<body>
    <div></div>
</body>

div{
    width:500px;
    height: 250px;
    border:1px solid red;
    background-image: url("../img/提交按钮.png");
	background-repeat:no-repeat;
}

在这里插入图片描述

1.4、背景图片位置（background-position）

语法：background-position:x y;/*默认：0 0；*/

length：百分数、浮点数、单位标识组成的长度值。
position：top、center、bottom、left、right

<!--案例-->
<body>
    <div></div>
</body>

div{
    width:500px;
    height: 250px;
    border:1px solid red;
    background-image: url("../img/提交按钮.png");
	background-repeat:no-repeat;
    background-position: center center;/*如果只给一个方位词，另一个默认center*/
}

在这里插入图片描述

1.5、图像固定（background-attachment）

语法：background-attachment:scroll | fixed;

scroll：背景图片随对象内容而滚动。（默认）
fixed：背景图像固定，即被顶在那里，不受滚动条影响。

<body>
    <div>
        <p>固定图像1</p>
        <p>固定图像2</p>
        <p>固定图像3</p>
        <p>固定图像4</p>
        <p>固定图像5</p>
        <p>固定图像6</p>
        <p>固定图像7</p>
        <p>固定图像8</p>
        <p>固定图像9</p>
    </div>
</body>

div{
    width:400px;
    height: 200px;
    border:1px solid red;
    overflow-y: scroll;/*给盒子一个纵向滚动条*/
    background-image: url("../img/提交按钮.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment:fixed;/*图像固定*/
}

在这里插入图片描述

1.6、图像大小（background-size）

语法：background-size: value;

length：设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只给一个值，第二个值默认auto
percentage：以父元素的百分比来设置宽高。如果只给一个值，第二个值默认auto
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

这个属性特别适合大图做网页背景图。

1.7、关于背景属性的复合写法（background）

语法：background:transparent url(...) no-repeat 0 0 fixed; /*background:背景颜色 URL 平铺 固定*/
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

> 这个属性特别适合大图做网页背景图。

## 1.7、关于背景属性的复合写法（background）

```css
语法：background:transparent url(...) no-repeat 0 0 fixed; /*background:背景颜色 URL 平铺 固定*/