web前端div背景

1.div+css布局

<div>特征

① 可以定义文档中的分区或节(division/section)

② 可以把文档分割为独立的、不同的部分,可以用作严格的组织工具

③ 是一个块级元素,它的内容会自动开始一个新行

④ 一般通过 id 或 class 标记与CSS配合使用

常用到的CSS属性:

width:数值、height:数值、background-color:颜色、float-left(是div不占据一行)

2.background-color背景颜色

默认值是transparent(透明的)

当同时定义了背景图像和背景颜色时,背景图像将覆盖背景颜色之上

颜色取值方式:

① 关键字,如red、blue等

② 16进制,如#000000、#cccccc、#ff0000等

③ rgb(0,0,0)

④ rgba(0,0,0, .n),n为0~1,透明度

3.background-image背景图片

默认值是none(没有图片)

元素背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距

通过url使用绝对或相对路径指定图片,background-image:url("");

4.background-repeat背景图片是否重复

常用属性:

repeat,默认值,background-image默认水平方向和垂直方向平铺显示

repeat-x,背景图片将在水平方向重复

repeat-y,背景图片将在垂直方向重复

no-repeat,背景图片将仅显示一次

语法示例

body{
        background-image: url("");
        background-repeat: no-repeat;
        }

5.background-size背景图片尺寸

length,设置背景图片的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为“auto”

percentage,以父元素的百分比来设置图片的宽度和高度,后文同上

cover,把背景图片扩展至足够大,以是背景图片完全覆盖背景区域,背景图片某些部分也许无法完全显示在背景区域中

contain, 把图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域,背景区域某些部分可能无法完全覆盖

6.background-position背景图片位置

position是相对于外部容器而言,非整个页面

属性值书写方式:

① 使用方位关键词定义,第一个值定义水平方向(left、center、right),第二个值定义垂直方向(top、center、bottom)

② 使用百分比定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0% 0%”,右下角是“100% 100%”

③ 使用具体数字定义,第一个值定义水平方向,第二个值定义垂直方向,左上角是“0px 0px”

属性特点:

① position的默认值为区域的左上角,即0点坐标

② 以上三种方式,如果仅定义了一个值,则另一个值为居中(center或50%)

③ 以上三种方式可以混合搭配使用

7.background-attachment背景图片是否随内容滚动

属性值:

① scroll,默认值,随页面其余部分的滚动而移动

② fixed,页面滚动时,背景图片不动

body{
     background-image: url("");
     background-attachment: scroll;
     }

8.background简写

background 简写属性可以在一个声明中设置所有的背景属性。

可以设置属性如下:

background-color

background-image

background-repeat

background-attachment

background-position

background-size

如果不设置其中某个值,也不会出问题,自动取默认值,在书写属性值时,没有严格顺序要求,建议按照上文列表顺序依次设置。希望这些干货对你有帮助,加油吧,任何时候开始学习都不晚。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值