MyException - 我的异常网
当前位置:我的异常网» Web前端 » 背景式样介绍

背景式样介绍

www.MyException.Cn  网友分享于:2013-03-09  浏览:0次
背景样式介绍

在前端设计中背景是缺一不可的,接下来就来简单介绍一下背景的相关样式。

本次还是以div标签来进行说明。

一、背景颜色:background-color

       此属性用来设置背景颜色。那么颜色的表示在前面的文章中已经提到有三种表现方式:英文(red、blue...)、RGB值、16进制值(#ffffff)。示例代码如下:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景颜色</title>
		<style>
			.container{
				width:200px;
				height:200px;
				border:2px solid red;
				background-color:pink;
			}
		</style>
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>

    效果如下所示:
   

 

二、背景图片:background-image

      图片背景在正常使用中用的比较频繁。必须要注意的是如果要给div设置背景图片的话必须要给div设置

 宽高。如果不设置宽度的话那么div的宽度将为div父元素的宽度;如果没有设置高度则不会显示任何东西。

      还需要注意的是:如果图片的宽高超过了div的宽高,那么div也不会被撑开,最终的显示效果会是图片只显示一部分。

      背景图片在引用时url的值分为绝对地址和相对地址,由于绝对地址在磁盘更换、主机更换等原因后可能找不到资源,因此建议使用相对地址。

示例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片</title>
		<style>
			.container{
				width:500px;
				height:500px;
				border:2px solid red;
				background-image: url(img/haizeiwang_little.jpg);
			}
		</style>
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>

    效果如下所示:
   
     我们可以明显的看到背景图片进行了无数的重复,直到铺满整个div。如果我们不想让背景图片重复呢?

     那么就需要用到我们下面要说到的background-repeat属性。

三、背景重复:background-repeat

       此属性表示背景图片的重复效果,默认情况下如果图片的宽高不能铺满整个div的话那就会进行横向(X轴)、纵向(Y轴)进行重复显示。

       background-repeat属性值:

       repeat:重复(默认值)。

       no-repeat:不重复,仅显示图片的原尺寸。

       repeat-x:横向平铺(X轴平铺)

       repeat-y:纵向平铺(Y轴平铺)

      示例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片平铺</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid mediumvioletred;
				background-image:url(img/haizeiwang.jpg);
				background-repeat: repeat-x;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

    运行效果如下图所示:
   
 四、背景图片定位:background-position

        此属性用来定义背景图片在div中的显示位置,分为水平方向位置和垂直方向位置。

        水平方向的位置分为:左(left)、中(center)、右(right)、数值

        垂直方向的位置分为:上(top)、中(center)、下(bottom)、数值

        在不写background-position属性的时候图片的默认显示位置为:左上(left  top)

        示例代码如下:       

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片定位--默认位置</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid mediumvioletred;
				background-image:url(img/haizeiwang_little.jpg);
				background-repeat:no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

         显示效果如下所示:
        

    我们可以指定位置让图片显示在具体的位置:

    如显示在右边中间位置,代码和效果如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片定位--右中位置</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid mediumvioletred;
				background-image:url(img/haizeiwang_little.jpg);
				background-repeat:no-repeat;
				background-position:right center;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

   
  
    如果位置是center的话,那么center可以不写。如:右下位置为(right center),也可以写成(right)

   例如:如果要图片显示在中下的位置,代码和效果如下:    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片定位--中下位置</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid mediumvioletred;
				background-image:url(img/haizeiwang_little.jpg);
				background-repeat:no-repeat;
				background-position:bottom;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

 
   
     我们同样也可以使用数值的方式更加自由的来决定图片的位置。

     如:让图片在水平方向距左边20px,垂直方向居中显示。代码和效果如下所示:   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片定位--自定义位置</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid mediumvioletred;
				background-image:url(img/haizeiwang_little.jpg);
				background-repeat:no-repeat;
				background-position:20px center;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

 
   
 

五、背景图片滚动:background-attachment

       background-attachment的属性值有两个:fixed、scroll

       fixed:可以理解为将图片订在浏览器的某个位置,它不会随着浏览器一起滚动。

       scroll:会随着浏览器滚动。

       示例代码和效果如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片滚动</title>
		<style>
			#bgDiv {
				width:700px;
				height:700px;
				border:2px solid blue;
				background:url(img/haizeiwang_little.jpg) no-repeat;
				background-attachment:fixed;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

   
   

     在上图中可以看到浏览器已向下滚动了,由于背景图片设置了background-attachment为fixed,因此图片依然显示在左上角。

 

六、背景样式合并:background

        不管是背景颜色还是背景图片,又或者说是背景的定义、平铺等等,这些都属于背景的相关样式,

那可以使用background来统一的设置背景的相关样式。代码和效果如下图所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景样式</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid #C71585;
				background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

           

       合并样式(background)中的属性顺序可以随意调整,没有固定的顺序;同样的属性也可写也可以不写。

       注意:如果使用了合并样式(background),那么最好不要再使用单独的分样式,因为有会进行覆盖。

代码和效果如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景样式</title>
		<style>
			#bgDiv {
				width:700px;
				height:400px;
				border:2px solid #C71585;
				background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div id="bgDiv"></div>
	</body>
</html>

 
       

       在这个例子中合并样式background已经定义了背景颜色为红色(red),但是后面又单独定义了background-color为蓝色(blue),

由于background-color是在background之后定义的,因此背景颜色将从red被替换成blue。
 

 ok,背景相关的样式介绍完毕,你明白了吗?
 

文章评论

为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员必看的十大电影
程序员必看的十大电影
老程序员的下场
老程序员的下场
我的丈夫是个程序员
我的丈夫是个程序员
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
 程序员的样子
程序员的样子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员都该阅读的书
程序员都该阅读的书
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
总结2014中国互联网十大段子
总结2014中国互联网十大段子
每天工作4小时的程序员
每天工作4小时的程序员
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
那些争议最大的编程观点
那些争议最大的编程观点
程序员的鄙视链
程序员的鄙视链
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
代码女神横空出世
代码女神横空出世
我是如何打败拖延症的
我是如何打败拖延症的
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
鲜为人知的编程真相
鲜为人知的编程真相
10个调试和排错的小建议
10个调试和排错的小建议
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
旅行,写作,编程
旅行,写作,编程
程序员和编码员之间的区别
程序员和编码员之间的区别
漫画:程序员的工作
漫画:程序员的工作
如何成为一名黑客
如何成为一名黑客
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有