仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1268|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS实例教程:background-position的申明

[复制链接]
若天明 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:28:00 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
网页制造poluoluo文章简介:设置或检索工具的背景图象地位。必需先指定background-image属性。该属性定位不受工具的补钉属性(padding)设置影响。
background-position的申明:
设置或检索工具的背景图象地位。必需先指定background-image属性。该属性定位不受工具的补钉属性(padding)设置影响。
默许值为:0%0%。此时背景图片将被定位于工具不包含补钉(padding)的内容地区的左上角。
假如只指定了一个值,该值将用于横坐标。纵坐标将默许为50%。假如指定了两个值,第二个值将用于纵坐标。
假如设置值为rightcenter,由于right作为横坐标值将会掩盖center值,以是背景图片将被居右定位。
对应的剧本特征为backgroundPosition。

语法:
background-position:length||length
background-position:position||position

取值:
length:百分数|由浮点数字和单元标识符构成的长度值。
position:top|center|bottom|left|center|right

background-position--界说背景图片的地位

取值:
[<percentage>|<length>|left|center|right][<percentage>|<length>|top|center|bottom]]
*程度
left:左
center:中
right:右
*垂直
top:上
center:中
bottom:下
*垂直与程度的组合
x-%y-%
x-posy-pos

初始值:0%0%
承继性:否
合用于:一切元素
background:背景.position:地位.

重点解说的中央:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="UTF-8">
<head>
<title>背景图片的定位background-position的成绩</title>
<styletype="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
text-align:center;
background:#000;
}
#container{
width:1000px;
margin:0auto;
background:#fffurl(images/bg.jpg)no-repeatlefttop;
height:500px;
}
-->
</style>
</head>
<body>
<divid="container"></div>
</body>
</html>
一.background-position:lefttop;.
背景图片的左上角和容器(container)的左上角对齐,超越的部分埋没。
同等于background-position:0,0;
也同等于background-position:0%,0%;
二.background-position:rightbottom;。
背景图片的右下角和容器(container)的右下角对齐,超越的部分埋没。
同等于background-positon:100%,100%;
也同等于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度
三.background-position:500px15px;。
背景图片沉着器(container)左上角的中央向右移500px,向下移15px,超越的部分埋没。
四.background-position:-500px-15px;。
背景图片沉着器(container)左上角的中央向左移500px,向上移15px,超越的部分埋没。
五.background-position:50%50%;。
同等于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超越的部分埋没。
同等于right:{容器(container)的高度—背景图片的高度}*right百分比,超越的部分埋没。
比方:background-position:50%50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background-position:-500px,235px;也就是背景图片沉着器(container)的左上角向左移500px,向下移235px;
六.background-position:-50%-50%;。
(这类情形背景图片应当用bg2.jpg才干看出效果,bg.jpg的高度太小效果不分明)
同等于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超越的部分埋没。
同等于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超越的部分埋没。
比方:background-position:-50%-50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即background-position:-250px,-70px;也就是背景图片沉着器(container)的左上角向左移250px,向上移70px;
</p>
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
深爱那片海 该用户已被删除
沙发
发表于 2015-1-17 22:51:40 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
爱飞 该用户已被删除
板凳
发表于 2015-1-26 23:34:10 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
兰色精灵 该用户已被删除
地板
发表于 2015-2-5 08:44:42 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
柔情似水 该用户已被删除
5#
发表于 2015-2-11 08:30:36 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
冷月葬花魂 该用户已被删除
6#
发表于 2015-3-2 07:19:41 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
因胸联盟 该用户已被删除
7#
发表于 2015-3-11 05:19:42 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
8#
发表于 2015-3-17 23:10:25 | 只看该作者
可以使用 CSS 检查工具进行设计。
小女巫 该用户已被删除
9#
发表于 2015-3-25 11:35:53 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 23:48

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表