关于background的一些知识
背景定位:
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字:
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
百分数值:
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
长度值:
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景关联:
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
转载于:https://www.cnblogs.com/yi-an/p/4596561.html
关于background的一些知识相关推荐
- python反向缩进_在Pycharm中对代码进行注释和缩进的方法详解
在Pycharm中对代码进行注释和缩进的方法详解 一.注释 1. #单行注释 2. """ 多行注释 """ 3. pycharm多行注释快 ...
- java文本框背景_background 设置文本框背景图
background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...
- [翻译:更新]Understanding Linux Network Internals - Table of Contents
会在每一节翻译完成后,更新本目录的链接,没有链接的就是还没有翻译的. Linux内核源代码下载(linux-2.6.10): http://www.softpedia.com/progDownload ...
- python回车换行怎么不行_解决pycharm回车之后不能换行或不能缩进的问题
解决pycharm回车之后不能换行或不能缩进的问题 如果不小心按到键盘上的Insert键的话,光标显示的就不是一条竖线,而是一个类似方块的阴影区域,比如 插入一下insert键的介绍:它叫插入键,缩写 ...
- JS原生系列-DOM篇(扩展)
为什么80%的码农都做不了架构师?>>> 继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍 ...
- 论文笔记:Sequence-to-Sequence Knowledge Graph Completion and QuestionAnswering
Sequence-to-Sequence Knowledge Graph Completion and Question 备注:ACL 2022 Main Conference 链接:https:// ...
- android:background大小,小Demo小知识-android:foreground与android:background
-----------------------------------------------前言君-------------------------------------------------- ...
- html:漂亮的原生表格_HTML表格:关于它们的所有知识
html:漂亮的原生表格 by Alexander Gilmanov 亚历山大·吉尔马诺夫(Alexander Gilmanov) HTML表格:关于它们的所有知识 (HTML Tables: All ...
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- DIV + CSS布局的一些知识汇总
以下是polaris在工作中零碎记录下来的知识,在此汇总一下. 1.开发之前,应设计好页面布局 2.插入多张图片时,如果想要图片并排,注意之间不能换行,换行会被当成空格.且一般与它的父元素也别换行. ...
最新文章
- 用T-SQL得到数据库的可视化结构
- 屏蔽敏感词的正则表达式
- python元祖迭代_python *式语法在迭代一个元组序列时的逻辑?
- android python 纠正图片,Python脚本替换Android资源(包名,图片,文件内容)
- ATL 核心COM继承类之IDispatchImpl及调用
- python最新面试题_2018年最新Python面试题及答案
- Dom4j完整教程~字符串与XML的转换
- nsga2算法c++实现_Bellman-Ford算法
- [outlook]打开以后就自动进入安全模式的解决方法。Outlook start in safe mode.
- c语言用户注册用链表,基于C语言链表实现的工作任务注册与执行
- 程序员的内功修炼——值得看的9本书
- 2018 Multi-University Training Contest 3: G. Interstellar Travel(凸包)
- php ezsql,ezSQL PHP数据库操作类库
- 阿里云基础产品技术月刊 2018年12月
- 计算机应用基础课程学什么,计算机专业本科课程 主要学什么
- 百度飞桨“万有引力”2022首站落地苏州,全面启动中小企业赋能计划
- Spring Cloud 2.2.2 源码之二十九nacos客户端获取配置原理四
- 用wvdial和ppp轻松上网
- 玩vr游戏的计算机配置要求,你的电脑能玩VR游戏吗?合格电脑不足1%
- 文件上传绕过的一些姿势