CSS background-position 属性
定义和用法
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
默认值:
0% 0% |
继承性:
no |
版本:
CSS1 |
JavaScript 语法:
object.style.backgroundPosition="center" |
实例
如何定位背景图像:
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
TIY
浏览器支持
所有浏览器都支持 background-position 属性。
注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
值
描述
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
|
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
|
x% y% |
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
|
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。
|
分享到:
相关推荐
在这个例子中,HTML可能会包含一个固定在屏幕右下角的容器,用于展示图标菜单。每个菜单项可能是一个`<div>`元素,通过CSS3的定位和过渡效果来实现动态展示。 2. **jQuery 代码**:`js`文件夹中的JavaScript代码...
悬浮在右下角的分享按钮是一种常见的社交媒体集成方式,用户无需滚动到页面顶部或打开侧边栏就能分享内容。这个特效可能使用了jQuery来控制按钮的定位,确保其始终在屏幕右下角。按钮点击后,可能会弹出一个包含各种...
在HTML部分,可以看到有两个具有相同背景色的`div`元素,一个是固定在页面右下角的(`#aa`),另一个是静态的(`#bb`)。这些`div`元素用于模拟广告或提示信息。页面的其余部分包含多个高为1500像素的背景颜色不同的...
在这个例子中,背景图片被设置为右下角,通过`background-position: right -100px;`,使得图片的一部分向左上方移动了100px,形成了一种裁剪的效果。 此外,我们还注意到在CSS中对`margin`属性的使用。`margin`用于...
在网页设计中,窗口停靠是一种常见的用户界面交互方式,它可以将特定的元素固定在屏幕的某一角落,如右下角,以便用户始终能够轻松访问。"js+css实现窗口右小角停靠及切换"这个主题涉及到JavaScript(js)和层叠样式...
`属性,图片相对于视口进行固定定位,这意味着当页面滚动时,图片会保持在固定的位置。`top: 0;`和`left: 0;`确保了图片从视口的左上角开始。将`width`和`height`设置为100%,则是让图片水平和垂直方向上填满整个...
然后,使用`bottom`和`right`属性设置元素与浏览器窗口下边界和右边界的距离,使其始终位于页面的右下角。`width`和`height`定义了`div`层的尺寸,你可以根据实际需求调整。此外,为了美观,我们还设置了背景色、...
`将其放置在页面的右下角。`background-image`定义了云朵图片,并使用`background-size`来调整其大小。`background-repeat: repeat;`使得云朵图片在水平方向上重复,创建一个连续的天空效果。 通过以上分析,我们...
我们首先需要设置悬浮窗的宽高、背景色、边框等基本样式,然后利用绝对定位将其固定在屏幕的一角,例如右下角: ```css .floating-window { width: 200px; height: 150px; background-color: #f0f0f0; border: ...
这类广告通常以动态或静态的形式出现,可能是图片、文字或者富媒体内容,旨在吸引用户的注意力,提高网站的广告收益或推广效果。 在描述中提到的“博文链接:https://lcb530.iteye.com/blog/703655”,这个链接指向...
15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...
15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...
按钮在网站右上角 地区行业网址导航程序注意: 1.解开本程序包,上传到支持ASP的服务器上。 2.后台登陆地址:http://您的网址/admin/ 3.用户和密码均为admin ---正式使用时请站长自行修改登陆密码. 4.数据库...
实例212 在页面右下角弹出渐显的广告窗口 268 3.7 状态栏设计 269 实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 ...
实例212 在页面右下角弹出渐显的广告窗口 268 3.7 状态栏设计 269 实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 ...
- 拖动单元格右下角的填充柄,自动填充公式和格式。 - **为单元格添加批注** - 右键点击单元格,选择“插入批注”,输入相关信息。 - **数据自动输入** - 利用Excel的预测功能,自动填充序列数据。 - **在...
按钮在网站右上角 个性化导航之简约版注意: 1.解开本程序包,上传到支持ASP的服务器上。(如使用无后台版可直接上传纯静态空间) 2.后台登陆地址:http://您的网址/admin/ 3.用户和密码均为admin ---正式使用...
`title` 属性则提供额外的信息或描述,当鼠标悬停在图片上时会显示出来。因此,选项A是正确的。 - **选项B**:与A相反,因此是错误的。 - **选项C**:显然也是错误的。 #### 2. 如何找到表单中的 hidden 元素 - ...
`会让元素向左或向右浮动,从而使其周围的文本或其他元素环绕它。 【CSS字体(font)】 CSS提供了多种方式来控制字体,如`font-family`, `font-size`, `font-weight`, `font-style`等。例如,`font: 16px Arial, ...
4. 固定定位:元素相对于浏览器窗口定位,即使页面滚动,元素位置仍保持不变。 **四、层叠与继承** 1. 层叠:当多个样式规则应用于同一个元素时,CSS根据规则的重要性和优先级来决定哪个规则生效。 2. 继承:子元素...