【Web】CSS(No.19)Css背景样式(background)

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 

参数:

length: 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position: top | center | bottom | left | center | right

说明:
设置或检索对象的背景图像位置。必须先指定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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值