(8)HTML5-图片

原创 2016年08月30日 16:25:33

在图片单元中,我们重点介绍的是如何改变游戏的前景与背景,以及CSS中一个重要的“盒子模式(box model)”布局概念。

前景与背景

前景属性通常应用于指定的文字显示的颜色,而背景属性可以决定游戏图片或颜色要以何种方式布局在游戏画面的最底层。

Color(前景色)

background-color(背景色)

background-image(背景图案)

background-repeat(背景图案重复)

background-attachment(背景图案滚动)

background-position(背景图案位置)

=======================================================================================================


{color}

属性color用于指定元素前景色。颜色的表示一共有三种,分别是:

16进制:每码范围从0-9,以及A-F,例如“#FFF000”

RGB值:RGB3码表示,范围介于0-255。例如RGB(255,0,0)

颜色名称:例如“red”

CSS文件

.font1{color:#ff0000;}
.font2{color:rgb(255,0,0);}


{background-color}

属性background-color可以通过上色的方式指定元素背景色。

CSS文件

body{background-color:#ff0000;}
p{background-color:green;}


{background-image}

属性background-image可以通过加入图像文件的方式指定元素的背景。

CSS文件

body{background-image:url("ball.png");}//若是图片格式小于背景,那么系统自动重复填满背景


{background-repeat}

针对background-image属性,如果我们不想使用重复填满效果,可以加入属性background-repeat来指定背景图案重复方式,包括不重复(no-repeat),在x轴重复(repeat-x),在y轴重复(repeal-y)。

CSS文件

body{
background-image:url("ball.png");
background-repeat:no-repeat
}


{background-attachment}

属性background-attachment可以决定当画面滚动时,背景图案要跟着画面滚动(scroll)或不跟着画面滚动(fixed)。

CSS文件

body{
background-image:url("ball.png");
background-repeat:no-repeat;
background-attachment:fixed;
}


{background-position}

属性background-position可以指定图案作为背景所在的位置,通过此属性可以精确定位背景图案的位置,共有三种方法。

文字:选择对齐x轴与y轴的“left”,“right”和“center”;

CSS文件

body{
background-image:url("ball.png");
background-repeat:no-repeat;
background-position:center center;
}

百分比:选择放置x轴与y轴的比例位置。

CSS文件

body{
background-image:url("ball.png");
background-repeat:no-repeat;
background-position:50% 50%;
}

坐标:选择对齐x轴与y轴的坐标位置。

body{
background-image:url("ball.png");
background-repeat:no-repeat;
background-position:640px 360px;
}


{background}

属性background则是上述所有与背景有关的属性的缩写用法。可以用一行指令代表所有对background的设置,安排属性时应该按照《background-color》,<background-image>,<background-repeat>,<background-attachment>,<background-position>的顺序排列,属性与属性之间保持空格,若不需要设置的属性则可以直接忽略不写。

CSS文件

body{
	background:url("ball.png") no-repeat center center;
}


盒子模式

过去要在网页上布局元素是采用“表格”排版的方式,通过设置不同的大小的表格,边框,以表格作为网页排版的定位基准。但是改用CSS排版后,这些大小不同的表格全部置换为“盒子(box)”,在画面中摆入不同大小的盒子作为图文内容的表达框架。使用CSS的盒子来排版画面,具备程序代码简洁,兼容更多浏览器等优点,使盒子模式成为CSS中一个重要的必学概念。

盒子模式被用来描述一个显示图文的表达框架,为了能够更好的操控框架属性,又可将一个盒子细分为边界(margin),边框(border),留白(padding)和内容(content)等四个部分,由于其一层一层的包覆方式,得到“盒子模式”这个名称。



{Margin}

属性Margin在边框之外,也是盒子最外层的属性,主要决定盒子与周围其它元素的距离。由于盒子共有四个边,所以可以分别决定上,下,左,右的距离,设置属性为:

margin-top(上边界)

margin-right(右边界)

margin-bottom(下边界)

margin-left(左边界)

我们可以通过三种方式来设置边界,分别是像素,百分比和“auto”。

CSS文件

.font1{
	margin-top:10px;
	margin-left:10%;
	margin-right:10px;
	margin-bottom:auto;
	border:1px solid 000000
}

也可以使用缩写的方式,一次指定四个边的距离,但是设置时一定要遵循上右下左的顺时针依次提供值。

CSS文件

.font2{
	margin:10px 10px auto 10%;
	border:1px solid 000000
}


{border}

属性border可以控制盒子的边界显示效果,例如边框样式,宽度,颜色等等。常见属性有:

border-style:style可以决定外框的样式,例如实线(solid),虚线(dashed),双线(double),点线(dotted),凹线(groove),凸线(ridge),嵌入线(inset),浮出线(outset)。

border-width:可以决定外框的粗细,可用数字(px)表示,或是用文字thin(薄),medium(中等)与thick(厚)来表示。

border-color:可以决定外框的颜色,可以通过16进制数,RGB编码和文字来设置。

border-top-,border-right-,border-bottom-,border-left-:在上述属性前加入这些前导字,可以分别设置上下左右边框的外观。

CSS文件

.font1{
	border-style:double;
	border-width:6px;
	border-color:red;
	border-top-color:green;
}


border:使用属性border可以将多行border设置缩减成一行,但仅限于四个边都用相同的设置时使用。

CSS文件

.font2{
	border:double red 6px;
}


{padding}

属性padding可以控制内容与边框之间的距离,也就是内容四周的留白部分,因此同样上下左右四边可以设置,设置单位可以使用长度(px),百分比(%)和"auto".

padding-top(上)

padding-right(右)

padding-bottom(下)

padding-left(左)

CSS文件

.font1{
	padding-top:10px;
	padding-right:10%;
	padding-bottom:10px;
	padding-left:10%;
	border: 1px solid 000000;
}

也可以使用缩写的方式,一次指定四个边的距离,但是设置时一定要注意遵循上,右,下,左的顺时针依次提供数值。

CSS文件

.font2{
	padding:10px 10px 10% 10%;
	border:1px solid 000000;
}

版权声明:本文为博主原创文章,转载必须声明出处,thank。

HTML5基础篇之html(三)

今天新教了js 表示有点小压力啊。。。奋斗到了现在 差点忘记了更新……so sorry 下面进入正题 六、a标签的4 种状态 1.link: 正常状态,也就是刚出现时候的状态 2.visite...
  • Toleranty
  • Toleranty
  • 2016年08月16日 22:12
  • 195

18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景。为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎。而现在为了实现跨平...
  • sdhjob
  • sdhjob
  • 2015年11月21日 21:50
  • 1550

html5-在网页中来回拖放图片

在网页中来回拖放图片           #div1,#div2{       float:left;       width:200px;       height:400px;    ...
  • xyy_933
  • xyy_933
  • 2016年05月18日 17:00
  • 307

html5-文件

html5---文件                      在元素新添一个multiple属性,设置为true,可以实现多个文件的上传;通过访问Blob对象,可以                 ...
  • u011587301
  • u011587301
  • 2016年03月30日 15:50
  • 144

HTML5-交易中心

積分轉讓                                             積分轉讓                     ...
  • yqj234
  • yqj234
  • 2016年08月26日 16:09
  • 280

HTML5-地理定位

HTML5 geolocation API(地理定位)允许对我们喜欢的网站分享我们的位置信息。在开发中使用js获取我们的当前位置坐标(经纬度)。 Geolocation 是基于navigat...
  • yangwensheng1122
  • yangwensheng1122
  • 2017年10月11日 12:20
  • 330

HTML5-搜索框

代码如下: 很赞?Yes! 简短的几个代码就能实现原本多行JS才能实现的完美交互效果,这就是HTML5略窥一点的赞! placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当inpu...
  • qq_32056539
  • qq_32056539
  • 2016年12月12日 16:33
  • 125

HTML5-百度地图

百度地图 定位—-index1.html百度地图API—-index2.html百度搜索百度API,点击进入,点击开发,点击javascriptAPI,点击获取密钥,创建应用,输入应用名称,选...
  • itszt888
  • itszt888
  • 2017年08月18日 08:33
  • 153

Html5-音频视频

Document --> 当前浏览器不支持 video直接播放,点击这里下载视频: 下载视频 ------------------...
  • li3196672779
  • li3196672779
  • 2017年06月19日 15:03
  • 137

HTML5-复选框

遇到个很尴尬的事情,从网上找的复选框,都有效果,然而在我自己的项目中却没有效果,对复选框的操作十分的不灵敏,网上也没什么可以解释的博客,这种事情也只有我犯这么二的问题,标签放到了不该放的位置,应该放在...
  • yes_or_no_tina
  • yes_or_no_tina
  • 2016年08月29日 14:10
  • 1034
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:(8)HTML5-图片
举报原因:
原因补充:

(最多只允许输入30个字)