css 背景样式设置

迷南。 2021-07-25 01:18 501阅读 0赞

背景颜色设置
    	background-color:red
    	background-color:rgba(x,x,x,透明度)
    
    设置背景线性渐变图像
     	background-image: linear-gradient(to right/to bottom right/角度deg(可选),red, yellow, blue); //默认从上到下
     		to bottom right:从左上角到右下角
    	
    透明度设置(可用于所有样式)
    	opacity:0.5；   取值为0到1，0为完全透明，1为不透明，完全透明并不是消失，也会占据空间
    	
    背景图片设置
    	background-image:url(路径);
    		多图背景:
    			background-image:url(路径),url(路径),...;
    			background-position:top left,center,...; 控制多图位置
    			background-repeat:no-repeat,repeat-x,...;控制多图
    			
    	background-repeat:no-repeat; 设置图片不重复，
    	即不同大小的图片不会重叠
    	background-repeat:repeat-x;  将在水平方向重复
    	background-repeat:repeat-y;  将在竖直方向重复
    	background-repeat:space; 水平竖直均匀分割占据
    	background-size:cover/100% 100%/contain; 图片平铺整个页面
    	background-attachment:scroll;   背景图片会随着鼠标滑轮上下滚动而滚动，浏览器默认为该样式，内容和图片一启动
    	background-attachment:fixed;   背景图片一直占据屏幕，不会随着滚动条滚动而滚动，内容动，图片不动
    	background:url(图片路径) 图片模式 宽 高
    	
    背景图片位置设置
    	安装屏幕坐标轴来设置
    	background-position-x:500px;   x设置左右位置
    	background-postion-y:200px;    y设置上下位置
    	background-position:right/top right;   将图片移至右边框
    	background-position:center;  将图片移至中心