CSS background

最新推荐文章于 2024-08-31 21:18:22 发布

兴系人生哦

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量118

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43799811/article/details/125891636

版权

background-color 设置背景 “颜色”

.box{
	/*设置背景颜色 属性 默认值 transparent (透明色)*/
	background-color:transparent ; 
	/*color颜色包含 16进制, rgb,rgba,hsl,hsla  */
	background-color:#00C853; 
	/*inherit 继承父元素颜色 */
	background-color:inherit ; 
	
}

background-image 设置背景 “图片”

.box{
	/*设置背景图片 属性 默认值 none(无图片背景显示)*/
	background-image:none ; 
	/*设置背景图片 属性 默认值 url('URL')(图片的'URL')*/
	background-image:url('URL') ; 
	/*创建一个线性渐变的图像 background-image:linear-gradient(方向，颜色 占比(0%),.....,颜色 占比(100%));
		方向:to top bottom(默认从上到下) | to left top (从右下到左上(渐变方向)) | 45deg(从45deg的对角开始渐变)
		颜色:color颜色
	 */
	background-image:linear-gradient(to bottom，#76FF03 0%,#00E676 50%,#00C853 100%);
	background-image:linear-gradient(to left top，#76FF03 0%,#00E676 50%,#00C853 100%); 
	background-image:linear-gradient(45deg，#76FF03 0%,#00E676 50%,#00C853 100%);
	
	
}

background-repeat 设置背景图片 “是否重复”

.box{
	/*背景图片垂直水平方向重复 属性 默认值 repeat*/
	background-repeat: repeat ; 
	/* 水平方向会重复背景图片 */
	background-repeat: repeat-x ;
	/* 垂直方向会重复背景图片  */
	background-repeat: repeat-y ;
	/* 设置背景图片不会重复（一般这个用的比较多） */
	background-repeat: no-repeat ;
	/*inherit 继承父元素 background-repeat 属性*/
	background-repeat: inherit ;
	
}

background-size设置背景图片的“大小”

.box{
	/*设置背景图片大小 设置两个参数(宽,高)设置图片宽高占父容器的百分比*/
	background-size:100% 100%; 
	/*设置背景图片大小 只设置一个参数宽度 这样高度默认自适应（auto）*/
	background-size:100%; 
	/*背景图片扩展足够大，让图片完全覆盖背景区域，有的部分可能无法完全显示在区域内 */
	background-size:cover ; 
	/*背景图片扩展足够大，让图片宽高完全适应区内容域 */
	background-size: contain ; 
	
}

background-attachment 设置背景图片 “是否跟随窗口滚动”

.box{
	/* 背景图片“随”页面的滚动而滚动 scroll (默认值)*/
	background-attachment: scroll; 
	/* 背景图片“不会随”页面的滚动而滚动 fixed */
	background-attachment: fixed; 
	/* 背景图片会随“元素内容的”滚动而滚动 local */
	background-attachment: local ; 
	/*置该属性的默认值。  initial 内容 */
	background-attachment: initial; 
	/*	指定 background-attachment 的设置应该从父元素继承 */
	background-attachment: inherit; 
}

background-position 设置背景图片在“元素中的位置”

.box{
	/*如果指定一个关键字 其他值默认是“center”*/
	background-position:left top ; 
	/*第一个水平方向，第二个垂直方向 百分比 像素 等其他css单位 都可以*/
	background-position:20% 30%; 
	/*inherit 继承父元素background-position */
	background-position:inherit ; 
	
}

background-origin设置 “background-position”相对于什么位置来定位背景图片

.box{
	/*相对于元素的内边距区域定位背景图片*/
	background-origin:padding-box ; 
	/*相对于元素的边框区域定位背景图片*/
	background-origin:border-box; 
	/*相对于元素的内容区域定位背景图片*/
	background-origin:content-box ; 
}

background-clip设置背景图片的显示区域

.box{
	/*背景被裁剪到内边距框。*/
	background-clip:padding-box ; 
	/*背景被裁剪到边框盒*/
	background-clip:border-box; 
	/*背景被裁剪到内容框。*/
	background-clip:content-box ; 
}

background 设置背景的缩写

.box{
	/*
	bg-color:颜色，bg-image：图片，position：图片定位，
	bg-size：图片大小，bg-repeat：图片重复，bg-origin 图片定位的相对位置，
	bg-clip：指定图片所在区域，bg-attachment：图片是否随页面滚动
	*/
	background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
}