CSS情况background、background

日期:2020-12-12 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

情况(background)是css中1个关键的的一部分,也是必须了解的css的基本专业知识之1。这篇文章内容可能涉及到css情况(background)的基础用法,包含诸如 background-attachment 等的特性,也会详细介绍1些相关情况(background)的常见技能,和 css3 中的 情况(background)(包括4个新的情况(background)特性)。

css2 中的情况(background)

简述

CSS2 中有5个关键的情况(background)特性,它们是:

* background-color: 特定填充情况的色调。

* background-image: 引入照片做为情况。

* background-position: 特定元素情况照片的部位。

* background-repeat: 决策是不是反复情况照片。

* background-attachment: 决策情况图是不是随网页页面翻转。

这些特性能够所有合拼为1个缩写特性: background。必须留意的1个关键点是情况占有元素的全部內容地区,包含 padding 和 border,可是不包含元素的 margin。它在 Firefox, Safari ,Opera 和 IE8 中工作中一切正常,可是 IE6 和 IE7 中,background 没把 border 测算在内。

 

基础特性

 

情况色(background-color)

background-color 特性用单色来填充情况。有很多方法特定这个色调,下列方法都获得同样的結果。

CSS Code拷贝內容到剪贴板
  1. background-colorblue;   
  2. background-colorrgb(0, 0, 255);   
  3. background-color#0000ff;  


background-color 也可被设定为全透明(transparent),这会使得其下的元素可见。

 

情况图(background-image)

background-image 特性容许特定1个照片展现在情况中。能够和 background-color 连用,因而假如照片不反复地话,照片遮盖不到地地区都会被情况色填充。编码很简易,只必须记牢,相对路径是相对款式表的,因而下列的编码中,照片和款式表是在同1个文件目录中的。

background-image: url(image.jpg);

可是假如照片在1个名为 images 的子文件目录中,就应当是:

background-image: url(images/image.jpg);

糖伴番茄:应用 ../ 表明上1级文件目录,例如 background-image: url(../images/image.jpg); 表明照片坐落于款式表的上级文件目录中的 images 子文件目录中。有点绕,但是这个大伙儿应当都了解了,我就不详说了。

 

情况平铺(background-repeat)

设定情况照片时,默认设置把照片在水平静竖直方位平铺以铺满全部元素。这或许是你必须的,可是有时会期待照片只出現1次,或只在1个方位平铺。下列为将会的设定值和結果:

CSS Code拷贝內容到剪贴板
  1. background-repeatrepeat/* 默认设置值,在水平静竖直方位平铺 */  
  2. background-repeatno-repeat/* 不平铺。照片只展现1次。 */  
  3. background-repeatrepeat-x; /* 水平方位平铺(沿 x 轴) */  
  4. background-repeatrepeat-y; /* 竖直方位平铺(沿 y 轴) */  
  5. background-repeat: inherit; /* 承继父元素的 background-repeat 特性*/  

【关键】情况精准定位(background-position)

background-position 特性用来操纵情况照片在元素中的部位。技能是,具体上特定的是照片左上角相对元素左上角的部位。
下面的事例中,设定了1个情况照片而且用 background-position 特性来操纵它的部位,另外也设定了 background-repeat 为 no-repeat。计量企业是像素。第1个数据表明 x 轴(水平)部位,第2个是 y 轴(竖直) 部位。

CSS Code拷贝內容到剪贴板
  1. /* 例 1: 默认设置值 */  
  2. background-position: 0 0; /* 元素的左上角 */  
  3.     
  4. /* 例 2: 把照片向右挪动 */  
  5. background-position75px 0;   
  6.     
  7. /* 例 3: 把照片向左挪动 */  
  8. background-position: -75px 0;   
  9.     
  10. /* 例 4: 把照片向下挪动 */  
  11. background-position: 0 100px;  

background-position 特性能够用其它标值,重要词和百分比来特定,这较为有效,特别是在元素规格并不是用像素设定时。

重要词是无需解释的。x 轴上:

* left* center* right

y 轴上:

* top* center* bottom

次序层面和应用像素值时的次序基本上1样,最先是 x 轴,其次是 y 轴,像这样:

background-position: right top;

应用百分数时也相近。必须关键的是,应用百分数时,访问器是以元素的百分比标值来设定照片的部位的。看事例就好了解了。假定设置以下:

background-position: 100% 50%;

This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

糖伴番茄:这1段想不到适合的汉语翻译,保存原文,意译。 

update: 谢谢天崖的指教,这段搞搞清楚了。应用百分数精准定位时,实际上是将情况照片的百分比特定的部位和元素的百分比部位对齐。也便是说,百分数精准定位是更改了情况图和元素的对齐基点。已不像应用像素和重要词精准定位时,应用情况图和元素的左上角为对齐基点。比如上例的 background-position: 100% 50%; 便是将情况照片的 100%(right) 50%(center) 这个点,和元素的 100%(right) 50%(center) 这个点对齐。

这再1次表明了,大家1直觉得早已把握的简易的物品,实际上也有大家比较有限的认知能力以外的专业知识。

留意原点一直左上角,最后的实际效果是笑容照片被精准定位在元素的最右侧,离元素顶部是元素的1半,实际效果和 background-position: right center; 1样。

 

情况附着

background-attachment 特性决策客户翻转网页页面时照片的情况。3个能用特性为 scroll(翻转),fixed(固定不动) 和 inherit(承继)。inherit 单纯性地特定元素承继他的父元素的 background-attachment 特性。

以便正确自然地理解 background-attachment,最先必须搞清楚网页页面(page)和视口(view port)是怎样合作地。视口(view port)是访问器显示信息网页页面的一部分(便是去掉专用工具栏的访问器)。视口(view port)的部位固定不动,不会改变动。

当向下翻转网页页面时,视口(view port)是没动的,而网页页面的內容向上翻转。看起来貌似视口(view port)向网页页面正下方翻转了。假如设定 background-attachment: scroll,就设定了当元素翻转时,元素情况也必须伴随着翻转。简而言之,情况是紧贴元素的。这是 background-attachment 默认设置值。

用1个事例来更清晰地叙述下:

CSS Code拷贝內容到剪贴板
  1. background-imageurl(test-image.jpg);   
  2.     
  3. background-position: 0 0;   
  4. background-repeatno-repeat;   
  5. background-attachmentscroll;  

当向下翻转网页页面时,情况向上翻转直至消退。

可是当设定 background-attachment 为 fixed 时,当网页页面向下翻转时,情况要待在它原先的部位(相对访问器来讲)。也便是不随元素翻转。

用另外一个事例叙述下:

CSS Code拷贝內容到剪贴板
  1. background-imageurl(test-image.jpg);   
  2. background-position: 0 100%;   
  3. background-repeatno-repeat;   
  4. background-attachmentfixed;  

网页页面早已向下翻转了,可是图象依然维持可见。

必须高度重视的1点是情况图只能出現在它父元素能做到的地区。即便照片是相对视口(view port)精准定位地,假如它的父元素不能见,照片就会消退。参照下面的事例。此例中,照片坐落于视口(view port)的左正下方,可是仅有元素内的照片一部分是可见的。

CSS Code拷贝內容到剪贴板
  1. background-imageurl(test-image.jpg);   
  2. background-position: 0 100%;   
  3. background-repeatno-repeat;   
  4. background-attachmentfixed;  

由于照片刚开始在元素以外,1一部分照片被切除。 

英文原文:Backgrounds In CSS: Everything You Need To Know

汉化原文:CSS情况全功略