[转]background-image属性研究

2023-11-07

http://blog.sina.com.cn/s/blog_4a0eab070100d8pk.html

 

在设置background-image属性时,经常会遇到一个background-position ;一直不怎么会用,今天有空研究下.

版本:CSS1  兼容性:IE6 7+ FF+ 继承性:无

 语法:

background-position : length || length
background-position : position || position
取值:

 

length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right

 

说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition
示例:
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top 0px right 0px; }
 

 其实background-position就是用来控制background-image的position

如果指定一个值,该值用于横坐标,纵坐标采用默认,即50%(center)

如果指定两个值,第二个值用于纵坐标,

例如你写定:background-position: left center;其实和background-position: left;是一样的都是左对齐,垂直居中对齐

如果指定:background-position: left left;就是左对齐,垂直居中对齐

如果指定:background-position: right  right;就是右对齐,垂直居中对齐

如果指定:background-position: left right;其实这两个值都是在横坐标上的作用,right会覆盖left属性,所以最后显示的还是就是右对齐,垂直居中对齐。

除了left center right 还有TOP bottom,这两个分别是顶部对齐,底部对齐.

例如指定:background-position: left top;那么图片将位于左上角。

利用这个特性可以实现一个非常酷的效果

 

根据以上实例还可以如下写法,兼容性也比较好

.test {background: url(title_bg2.jpg)  no-repeat -203px 0px; width:200px; height:36px;}
.title {background: url(title_bg.jpg) no-repeat left 0px; width:83px; height:36px;}

 

 

Alpha(Opacity=50)  这个CSS属性 半透明度 50

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[转]background-image属性研究 的相关文章

  • @font-face 字体不起作用

    我正在尝试从本地存储中获取一种可以使用的字体 font face font family const src url const ttf fp title1 font family const trebuchet ms font size
  • .htaccess 从 URL + 目录中删除 WWW

    对于很多人来说这似乎不是问题 阅读 我找不到答案 但我想更新以下 htaccess 代码 不仅从 URL 中删除 www 还删除任何子内容访问的目录 RewriteEngine on RewriteCond HTTP HOST www NC
  • 无法使用 CSS 设置文本区域宽度

    我尝试使用此 CSS 来设置表单元素的宽度 input type text textarea width 250px 如果您查看此 Firefox 屏幕截图 您会发现字段的宽度不同 我在 Safari 中也得到了类似的效果 替代文本 htt
  • Html 表格右对齐

    item a item b item c item d item e item a item b item c item d item e 我的表中有两行 我希望它们每行都有一个左对齐的项目和一些右对齐的项目 如上面的第一个示例所示 然而
  • 如何填充剩余高度的100%?

    1 2
  • 使用 Bootstrap 粘性导航栏进行 Href 跳转 [重复]

    这个问题在这里已经有答案了 因此 我有一个带有下拉菜单的粘性导航栏 可以让我跳转到页面的不同部分 但是 当我跳转到不同的部分时 导航栏会覆盖我跳转到的 div 的开头 我检查了导航栏 它的高度为 58 带有填充和所有内容 如何将跳转偏移 5
  • 为什么负边距会影响我的页面宽度?

    请参考以下内容example http jsfiddle net wdm954 Fcznp 9 其中 200px 宽的外部 div 旨在确定我们的页面宽度 它包含一个 400px 宽的内部 div 但左 右负边距为 100px 我预期的最终
  • Django - 在设置中使用反向 url 映射

    例如 django 设置文件中的一些选项是 urlLOGIN URL and LOGIN REDIRECT URL 是否可以避免对这些 url 进行硬编码 而使用反向 url 映射 目前 这确实是我发现自己在多个地方编写相同网址的唯一地方
  • 在同一个 UI 元素中整齐地顺序显示不同尺寸的图像

    在我的应用程序中 我需要在其他 UI 元素中显示单个预渲染图像 我希望其他元素紧紧包裹在图像的顶部和底部 显示的图像取决于应用程序的状态 并且图像的大小可能不同 这个问题 https stackoverflow com questions
  • 滚动到 HTML 网站中的顶部 JavaScript

    我正在尝试在我的网站中实现滚动到顶部功能 www arrow tvseries com 网站上可以看到 按钮 但它无法正常工作 因为单击时它不会滚动到页面顶部 更重要的是 我希望 滚动到顶部按钮 在向下滚动 例如一半页面 时可见 这是 Ja
  • 如何找到“display: none”元素的尺寸?

    我在 div 中有一些获取 CSS 的子元素display none应用于它 我想找出子元素的尺寸是多少 我怎样才能做到这一点 小提琴演示 https jsfiddle net h9b17vyk var o document getElem
  • 向 Rails 中的所有活动链接添加“活动”类?

    基本上 我有很多类似这样的代码 link to t profile business path business class active if current page business path business 这不是很干 我想知道是
  • 背景过滤器不适用于 Chrome 中的嵌套元素

    我有一个div outer和里面一个div inner 都与position absolute and backdrop filter blur 8px https jsbin com nihakiqocu 1 edit html css
  • 响应式 CSS 背景图片

    我有一个网站 g floors eu 我想让背景 在CSS中我为内容定义了一个背景图像 也具有响应能力 不幸的是 除了我能想到的一件事之外 我真的不知道如何做到这一点 但这是一个解决方法 创建多个图像 然后使用 css 屏幕大小来更改图像
  • CSS 术语:这些叫什么?

    考虑 p foo bar CSS 中这些语句的正确名称是什么 我见过它们被称为选择器 规则或规则集 但哪个是正确的 将考虑一条规则 p 本例中的选择器是 p 规则由选择器和声明组成 声明是property value所以整个规则是 sele
  • 用于滚动文本的CSS文本动画[重复]

    这个问题在这里已经有答案了 我想我已经完成了一半 但我需要一些 CSS3 或 jQuery 帮助来完成这个滚动文本 我有一个 div 我需要文本从左向右滚动 然后当点击 div 末尾时再次从右向左滚动 依此类推 我目前从左到右 但它似乎在
  • 如何在流体宽度容器中将左侧、中间和右侧的三个按钮放置在同一行?

    我在用着LESS在 Twitter Bootstrap 环境中 但我会直接接受CSS也有答案 Fluid width container Btn1 Btn2 Btn3 另一种宽度 Fluid width container Btn1
  • CSS中的继承是什么意思? [复制]

    这个问题在这里已经有答案了 我经常使用background inherit 像这样 许多其他 CSS 属性接受继承作为值 但有什么作用inherit意思是 它是如何工作的 inherit只是意味着样式将从元素的父元素继承 例如 jsFidd
  • ngClassOdd/ngClassEven 未按预期工作

    使用 Angular 版本 1 2 15 我发现了一个错误 该错误似乎从版本 1 2 2 开始直到 1 2 15 重现 Plunker 演示 http plnkr co edit 3nExMtZ92AQS7BvLsQ8m p preview
  • 如何使元素水平居中?

    如何水平居中 div 在另一个内 div 使用CSS div div Foo foo div div With flexbox水平和垂直居中的 div 样式非常容易 inner border 0 05em solid black outer

随机推荐

  • 泛型和包装类

    1 泛型 1 1泛型的定义 泛型是程序设计语言的一种特性 允许程序员在强类型程序设计语言中编写代码时定义一些可变部分 那些部分在使用前必须作出指明 各种程序设计语言和其编译器 运行环境对泛型的支持均不一样 将类型参数化以达到代码复用提高软件
  • 构建seq2seq模型的常见问题

    1 seq2seq模型 输入是一个词向量 而不是词向量列表 对吧 是的 对于seq2seq模型 输入和输出都需要被转换成词向量形式 对于输入来说 通常会将一个句子转换成一个词向量序列 具体地 对于每个单词或者字符 都会将其对应成一个词向量
  • 广联达C++一面(坐等感谢信)

    括号中是我的回答 自我介绍 介绍一个最近做过的项目 不需要非得是C 相关的 回答了节点属性标注系统 在里面负责哪一部分 介绍了三个部分 说了自己负责的是统计和二阶段预测 主要是用主动探测的方法扩展节点信息 随机性检测是怎么做的 用的什么信息
  • Java EE学习笔记(1:Servlet & JSP)

    Servlet简介 Servlet技术规范是JavaEE技术规范中的一个重要组成部分 Servlet是一种独立于平台和协议的服务器端的Java应用程序 可以生成动态的Web页面 实际上 Servlet不仅仅是用于返回HTML的页面的 比如
  • Python_FontTools使用

    目录 Font Tools的使用 1 fontTools使用总结 2 加载字体文件 3 保存为xml文件 4 获取各节点名称 返回为列表 5 获取getGlyphOrder节点的name值 返回为列表 6 获取cmap节点code与name
  • 51单片机有几个通用io口_我在职高教单片机——02零基础学51单片机IO口(1)

    大家好 我是老王 职高老师一枚 一直从事单片机 计算机 电子技术基础等课程的教学 对于职高的学生层次 同行应该都懂的 老师在课堂上教学几乎是没什么成就感的 正是如此 才有了借助头条平台寻求认同感和成就感的想法 在这里 我准备陆续把自己花了很
  • 程序是如何从编辑到执行的——我的初步理解

    目录 1 预处理 2 编译 3 汇编 3 1 机器码的格式 3 2 编码过程 4 链接 5 取指 6 译码 7 执行 8 访存 9 写回 10 更新PC 今天来谈谈 一句代码 是如何从被编辑到被执行的 以下为本人在阅读相关书籍资料后的初步理
  • IDEA项目上传至git常见问题

    问题一 Push rejected Push to origin master was rejected 方案一 git pull origin master allow unrelated histories 打开git命令行窗口 依次输
  • 数据挖掘:基本概念理解

    定义 数据挖掘 从大量数据中挖掘有趣模式和知识的过程 一 知识发现过程 1 数据预处理 1 数据清理 消除噪声和删除不一致数据 2 数据集成 多种数据源组合在一起 3 数据选择 从数据库中提取与分析任务相关的数据 4 数据变换 通过汇总或聚
  • 卸载掉360之后无法删除360safe文件夹解决办法!

    卸载掉360之后无法删除360safe文件夹解决办法 问题是这样的 选择 360safe 文件夹 右键选择 删除 结果如下 一开始觉得是360未卸载干净 比如 360主动防御模块 之类的 但是 打开任务管理器一看 没有与360相关的东东了呀
  • 紫光云服务器芯片,紫光云与新华三半导体共建芯片设计云2.0 携手打造一站式云端芯片平台...

    原标题 紫光云与新华三半导体共建芯片设计云2 0 携手打造一站式云端芯片平台 2021年是芯片设计云元年 行业需求呈现井喷态势 中国云服务新势力脱颖而出 在世界舞台崭露头角 为中国集成电路行业发展插上了隐形翅膀 近日 紫光云就正式通过三星F
  • 【牛客网 - 华为机试】HJ1 字符串最后一个单词的长度

    HJ1 字符串最后一个单词的长度 题目描述 计算字符串最后一个单词的长度 单词以空格隔开 输入描述 输入一行 代表要计算的字符串 非空 长度小于5000 输出描述 输出一个整数 表示输入字符串最后一个单词的长度 示例1 输入 hello n
  • redis输入密码去除提示Warning: Using a password redis输入密码去除提示Warning: Using a password...

    2019独角兽企业重金招聘Python工程师标准 gt gt gt redis输入密码去除提示Warning Using a password hello运维 百家号11 0510 41 问题现象 redis的监控 经常使用zabbix 通
  • MVC框架理解(整理)

    MVC是三个单词的首字母缩写 它们是Model 模型 View 视图 和Controller 控制 视图 视图 View 代表用户交互界面 对于Web应用来说 可以概括为HTML界面 但有可能为XHTML XML和Applet 随着应用的复
  • 通过命令行关闭Bitlocker

    cmd中输入以下命令关闭 manage bde off C 但是有时候出现如下提示 此时需要先执行如下命令 系统分区不是C的话更改下面的盘符 manage bde autounlock ClearAllKeys c 然后再执行即可 mana
  • 干货来了!!简单操作让你的GitHub格子重新绿起来

    自从得知了GitHub这个网站 我就开始把自己的代码每天提交上去 看着小绿格子慢慢的特别有成就感 事故 发生了 就在上周一之后我的小绿格子突然不变色了 我一直以为是学校网太差 一周过去了总觉得不对劲 专门找时间查了一下 经过在网上搜索 我的
  • 编写高质量代码:改善Java程序的151个建议(第1章:Java开发中通用的方法和准则___建议14~20)...

    作为一个由影视圈转行做Java的菜鸟来说 读书是很关键的 本系列是用来记录 编写高质量代码 改善java程序的151个建议 这本书的读书笔记 方便自己查看 也方便大家查阅 建议14 使用序列化类的私有方法巧妙解决部分属性持久化问题 建议15
  • Windows通过powershell永久添加、删除环境变量

    文章目录 1 管理环境变量 PATH 1 1 添加powershell函数 1 2 函数用法 2 管理非 PATH 环境变量 使用windows系统时 当安装或解压一个可执行程序后 为了更方便的调用程序 往往会向环境变量 path中添加该程
  • 分布式并发查询结果不重复可行性方案

    场景 接口逻辑 资源池获取数据 并在拿到数据后进行更新 问题 高并发下 获取的结果集相同的概率大 资源争抢更新 导致并发的相同的数据后更新的异常 尝试方案 序号 方案 问题 1 获取结果集100个 随机挑选一个 不可行 并发和随机到同一个的
  • [转]background-image属性研究

    http blog sina com cn s blog 4a0eab070100d8pk html 在设置background image属性时 经常会遇到一个background position 一直不怎么会用 今天有空研究下 版本