CSS 背景相关属性

背景相关属性——background

一、背景颜色——background-color
	属性值:具体颜色单词、rgb、rgba、十六进制

在这里插入图片描述
渲染后的结果

二、背景图片——background-image
	属性值:url()

在这里插入图片描述
在这里插入图片描述
注意点:
1、url()中放置图片的地址, 图片的地址可以是本地的地址, 也可以是网络的地址
2、如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
3、如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

二、背景平铺——background-repeat
	属性值: repeat/默认值,水平垂直都需要平铺;
			norepeat/不平铺;
			repeat-x/只在水平方向上平铺;
			repeat-y/只在垂直方向上平铺

在这里插入图片描述

在这里插入图片描述

三、背景定位——background-position
	控制背景图片的位置
	属性值: 具体方位名词;
			水平方向 :left  center  right ;
			垂直方向  top  center  bottom;

在这里插入图片描述

四、背景属性连写——background
	属性值可以省略

在这里插入图片描述
在这里插入图片描述

四、背景关联——background-attachment
	属性值:scroll;默认值,会随着滚动条的滚动而滚动;
		   fixed;不会随着滚动条的滚动而滚动
		   快捷键:ba background-attachment:;
		   
五、插入图片和背景图片的区别
	插入图片:占位置;
			有定位属性,方便控制位置;
			使用的图片经常更换时,使用。
	背景图片: 装饰图;
			无定位属性;
			不经常更换的图片。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值