CSS背景属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/JAVAWEB_/article/details/107777444

背景

背景颜色：

background-color:颜色值 ; 默认值为透明的

背景图片

background-image:url(图片地址); 默认值为没有背景图none;

背景平铺

background-repeat:属性值;
(repeat[平铺，默认值],no-repeat[不平铺],repeat-x[沿着x轴平铺]，repeat-y[沿着y轴平铺])
页面元素既可以添加背景颜色也可以添加背景图片，只不是背景图片会压住背景颜色

背景图片的位置

背景图像固定

background-attachment : scroll | fixed
scroll : 图像是随着对象内容滚动
fixed : 图像固定

背景复合写法

使用简写时，没有特定的书写顺序，一般习惯约定顺序为：
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

背景色半透明

background : rgba(0,0,0,0.3);
第一个0代表r，第二个代表g，第三个代表b,第四个代表透明度，0为100%透明，1为完全不透明

属性	作用	值
background-color	背景颜色	预定义颜色/十六进制/RGB代码
bakcground-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	分别是x坐标跟y坐标
background-attachment	背景附着	scroll(背景滚动),fixed(背景固定)
背景简写	书写更方便	背景颜色背景地址背景平铺背景滚动背景位置;
背景半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是4个值

案例
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.nav a{
				display: inline-block;
				width: 120px;
				height: 58px;
				background-color: pink;
				text-align: center;
				line-height: 48px;
				color: #FFF;
				text-decoration: none;
			}
			.nav .bg1{
				background:url(../img/bg1.png) no-repeat;
			}
			.bg1:hover{
				background: url(../img/bg11.png);
			}
			.nav .bg2{
				background: url(../img/bg2.png) no-repeat;
			}
			.bg2:hover{
				background: url(../img/bg22.png);
			}
			.nav .bg3{
				background: url(../img/bg3.jpg) no-repeat;
			}
			.bg3:hover{
				background: url(../img/bg3.png);
			}
			.nav .bg4{
				background: url(../img/bg4.png) no-repeat;
			}
			.bg4:hover{
				background: url(../img/bg11.png);
			}
			.nav .bg5{
				background: url(../img/bg5.png) no-repeat;
			}
			.bg5:hover{
				background: url(../img/bg22.png);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="bg1">五彩导航</a>
			<a href="#" class="bg2">五彩导航</a>
			<a href="#" class="bg3">五彩导航</a>
			<a href="#" class="bg4">五彩导航</a>
			<a href="#" class="bg5">五彩导航</a>
		</div>
	</body>
</html>