`
jiangpan
  • 浏览: 53821 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

静态页面背景图片 固定在右下角(或其他位置)的方法

    博客分类:
  • Css
阅读更多

CSS background-position 属性

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

默认值:继承性:版本:JavaScript 语法:
0% 0%
no
CSS1
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 值。

TIY 实例

如何放置背景图像
本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。

相关页面

CSS 教程:CSS 背景

CSS 参考手册:background-image 属性

HTML DOM 参考手册:backgroundPosition 属性

分享到:
评论

相关推荐

    jQuery+CSS3右下角图标菜单代码.zip

    在这个例子中,HTML可能会包含一个固定在屏幕右下角的容器,用于展示图标菜单。每个菜单项可能是一个`<div>`元素,通过CSS3的定位和过渡效果来实现动态展示。 2. **jQuery 代码**:`js`文件夹中的JavaScript代码...

    js+css3全屏折角导航菜单和右下角悬浮分享按钮特效.zip

    悬浮在右下角的分享按钮是一种常见的社交媒体集成方式,用户无需滚动到页面顶部或打开侧边栏就能分享内容。这个特效可能使用了jQuery来控制按钮的定位,确保其始终在屏幕右下角。按钮点击后,可能会弹出一个包含各种...

    兼容性非常好的js右下角与漂浮广告代码

    在HTML部分,可以看到有两个具有相同背景色的`div`元素,一个是固定在页面右下角的(`#aa`),另一个是静态的(`#bb`)。这些`div`元素用于模拟广告或提示信息。页面的其余部分包含多个高为1500像素的背景颜色不同的...

    一列固定宽度布局和背景图片绝对定位

    在这个例子中,背景图片被设置为右下角,通过`background-position: right -100px;`,使得图片的一部分向左上方移动了100px,形成了一种裁剪的效果。 此外,我们还注意到在CSS中对`margin`属性的使用。`margin`用于...

    js+css实现窗口右小角停靠及切换

    在网页设计中,窗口停靠是一种常见的用户界面交互方式,它可以将特定的元素固定在屏幕的某一角落,如右下角,以便用户始终能够轻松访问。"js+css实现窗口右小角停靠及切换"这个主题涉及到JavaScript(js)和层叠样式...

    css全屏背景图片设置,django加载图片路径详解

    `属性,图片相对于视口进行固定定位,这意味着当页面滚动时,图片会保持在固定的位置。`top: 0;`和`left: 0;`确保了图片从视口的左上角开始。将`width`和`height`设置为100%,则是让图片水平和垂直方向上填满整个...

    css将div层固定显示在页面底部不随滚动条滚动

    然后,使用`bottom`和`right`属性设置元素与浏览器窗口下边界和右边界的距离,使其始终位于页面的右下角。`width`和`height`定义了`div`层的尺寸,你可以根据实际需求调整。此外,为了美观,我们还设置了背景色、...

    css实现背景渐变与底部固定的蓝天白云示例

    `将其放置在页面的右下角。`background-image`定义了云朵图片,并使用`background-size`来调整其大小。`background-repeat: repeat;`使得云朵图片在水平方向上重复,创建一个连续的天空效果。 通过以上分析,我们...

    css3实现网页悬浮窗功能

    我们首先需要设置悬浮窗的宽高、背景色、边框等基本样式,然后利用绝对定位将其固定在屏幕的一角,例如右下角: ```css .floating-window { width: 200px; height: 150px; background-color: #f0f0f0; border: ...

    一款类似19楼左上角的广告代码

    这类广告通常以动态或静态的形式出现,可能是图片、文字或者富媒体内容,旨在吸引用户的注意力,提高网站的广告收益或推广效果。 在描述中提到的“博文链接:https://lcb530.iteye.com/blog/703655”,这个链接指向...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...

    程序天下:JavaScript实例自学手册

    15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...

    地区行业网址导航程序(带后台20背景)v20151109.rar

    按钮在网站右上角 地区行业网址导航程序注意: 1.解开本程序包,上传到支持ASP的服务器上。 2.后台登陆地址:http://您的网址/admin/ 3.用户和密码均为admin ---正式使用时请站长自行修改登陆密码. 4.数据库...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例212 在页面右下角弹出渐显的广告窗口 268 3.7 状态栏设计 269 实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例212 在页面右下角弹出渐显的广告窗口 268 3.7 状态栏设计 269 实例213 跑马灯文字 269 实例214 状态栏中的收缩显示文字 270 实例215 状态栏中显示数字时钟 271 3.8 导航菜单设计 272 实例216 树状导航菜单 272 ...

    个性化导航之简约版(带后台) v20160523.rar

    按钮在网站右上角 个性化导航之简约版注意: 1.解开本程序包,上传到支持ASP的服务器上。(如使用无后台版可直接上传纯静态空间) 2.后台登陆地址:http://您的网址/admin/ 3.用户和密码均为admin ---正式使用...

    仅限于自己用的web前端面试题

    `title` 属性则提供额外的信息或描述,当鼠标悬停在图片上时会显示出来。因此,选项A是正确的。 - **选项B**:与A相反,因此是错误的。 - **选项C**:显然也是错误的。 #### 2. 如何找到表单中的 hidden 元素 - ...

    DIV+CSS实例.docx

    `会让元素向左或向右浮动,从而使其周围的文本或其他元素环绕它。 【CSS字体(font)】 CSS提供了多种方式来控制字体,如`font-family`, `font-size`, `font-weight`, `font-style`等。例如,`font: 16px Arial, ...

    不错的CSS2 中文手册

    4. 固定定位:元素相对于浏览器窗口定位,即使页面滚动,元素位置仍保持不变。 **四、层叠与继承** 1. 层叠:当多个样式规则应用于同一个元素时,CSS根据规则的重要性和优先级来决定哪个规则生效。 2. 继承:子元素...

Global site tag (gtag.js) - Google Analytics