HTML/CSS

** background背景属性**
background-color( 背景颜色): 指定区域填充的背景颜色 表示方式:
1. 十六进制: 如:#ff0000;
2. 英文单词: 如:red;
3. rgb: 如:rgb(255, 0, 0);

background-image(背景图片):指定区域的背景图片 表示方式:
1. 相对路径(从当前HTML文件开始的路径):如: img/1.png
2. 绝对路径(指带域名的文件的完整路径):如:https://img30.360buyimg.com/pop/s1180x940_jfs/t1/118468/30/17358/101230/5f58938fEebbb3915/cb9a053ed5b9d0ce.jpg

background-repeat(背景图片的平铺方式) 属性值:
repeat-x 从x轴开始平铺
repeat-y 从y轴开始平铺
no-repeat 不平铺

background-position背景图片的位置
background-position: 水平位置 垂直位置
如:background-position: 10% 10%;
background-position: top center;

background-attachment 背景图片是否固定或者随页面滚动 属性值:
background-attachment : fixed 固定
background-attachment : scroll 随页面滚动
background-attachment : inherit 从父元素继承

background-clip 背景的绘制区域 属性值
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框

background-origin 背景的定位区域 属性值
padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位

background-size 背景图片的大小 属性值
*1. 具体的值。 x轴 y轴
background-size: 20px 20px;
background-size: 20% %20;
2. cover 以背景图片长的一边覆盖背景区域
3. contain 以背景图片短的一边覆盖背景区域
背景属性简写
background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值