【Web】CSS（No.19）Css背景样式（background）

最新推荐文章于 2024-07-03 23:13:09 发布

Sherry Lupus

最新推荐文章于 2024-07-03 23:13:09 发布

阅读量259

点赞数

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.csdn.net/qq_43251850/article/details/91489244

版权

Web-Css 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

Css背景样式（background）

需要素材点击图片联系我或私信、评论

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片(image)

语法：

background-image : none | url (url)

参数：
none： 无背景图（默认的）
url： 使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

小技巧：我们提倡背景图片后面的地址，url不要加引号。

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat ： 背景图像在纵向和横向上平铺（默认的）
no-repeat ： 背景图像不平铺
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置(position)

语法：

background-position : length || length

background-position : position || position

参数：

说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。

背景附着

语法：

background-attachment : scroll | fixed

参数：
scroll： 背景图像是随对象内容滚动
fixed： 背景图像固定

说明：
设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：  背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>背景样式</title>
	<style>
	  body {
	  	height:2000px;
	  }
	  .box1 {
	  	width:2000px;
	  	height:200px;
	  	/* 设置背景颜色 */
	  	background-color:#eeeeee;
	  	/* 设置背景图片 */
	  	background-image:url(img/sun.jpg);
	  	/* 设置图片不平铺 */
	  	background-repeat:no-repeat;
	  	/* 设置背景图片的定位---右下角（x轴，y轴） */
	  	 background-position:80px 150px; 
	  	/* background-position:right bottom; */
	  	/*background-position:100% 50%;*/

	  	/* 设置背景图片垂直水平居中 */
	  	/* background-position:50% 50%; */
	  	/* background-position:center; */

	  	/* 设置背景图片的是否滚动 */
	  	height:2000px;
	  	background-attachment:fixed;
	  }
	  .box2 {
	  	width:800px;
	  	height:500px;
	  	background:#eeeeee url(img/sun.jpg) no-repeat fixed 20px 20px;
	  }
	</style>
  </head>
  <body>
	<div class="box1">千金美酒千人干</div>
	<div class="box2">纵是一醉连城也寒酸</div>
  </body>
</html>

导航栏案例

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>导航栏案例</title>
	<style>
	  .nav {
	  	width:100%;
	  	height:50px;
	  	/* 只能让里面的行内元素和行内块级元素居中，对里面的盒子无效 */
	  	text-align:center;
	  }

	  .nav a {
	  	width:120px;
	  	height:50px;
	  	display:inline-block;
	    background-color:#abcdef;
	    border-radius:5px;
	    text-decoration:none;
	    color:white;
	    text-align:center;
	    line-height:50px;
	    margin:30px 5px;
	  }

	  a:hover{
	  	      background-color:#a1aeb1;
	  }

	  .box {
	  	width:100px;
	  	height:100px;
	  	/* 让块级盒子水平居中于当前父容器 */
	  	/* 上下为0，左右居中 */
	  	margin:0 auto;
	  }
	</style>
  </head>
  <body>
    <div class="nav"> 
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
		<a href="#">网站导航</a>
	</div>
	<div class="box"></div>
  </body>
</html>