CSS背景-background

2018-06-24 02:09:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  • 复合属性—background

如果同时设置了background-color和background-image时,背景颜色会被图片覆盖。

background-image: 用作背景的图片,background:url( );

如果将背景设置为图片,那么我们就要考虑以下几个属性了。

background-repeat:

repeat-x:横向平铺

 

repeat-y:纵向平铺

 

round:背景图像自动缩放直到适应且填充满整个容器。

 

space:背景图像以相同的间距平铺且填充满整个容器或某个方向。

 

repeat:背景图像在横向和纵向平铺,默认值。

 

no-repeat:不平铺

 

background-size:

具有两个参数,值既可以是px也可以是%或者是auto(默认)。若只有一个参数,则为宽度,高度等比例缩放,如果背景图片的尺寸超过容器,将会被裁切。若有两个参数,则为宽高。

cover:背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器,不过超出的部分将会被裁切。

 

contain:此属性值可以将背景图片等比例放大或者缩小。contain只要求某一个方位上将容器覆盖,比如纵向或者横向能够最小程度将容器覆盖。

 

background-position:确定背景图片的位置

background-position : length || position

length:<percentage> | <length>

position:left center|left top| ……

1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。该属性定位不受元素的 padding影响,例如,我们给容器元素增加padding值,只是影响了容器元素的高度和宽度,背景图片的左上角还是与容器元素的左上角对齐。

 

2、background-position:-10px -20px;

图片以容器左上角为参考向左偏移10px,向上偏移 20px,

 

3、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

x=(300-178)*50%=61px y=(300-108)*50%=96px

 

4、background-position:100% 100%;

图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

 

background-attachment:定义用户滚动页面时背景图片会发生什么。

scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

 

但是有一种情况例外:对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

 

fixed:背景图相对于视口固定,就算元素有了滚动条,背景图也不随内容移动,好像背景图片被钉到了视窗上一样。

 

local:背景图相对于元素内容固定。

背景图片会随着页面其余部分的滚动而移动。但如果内容是可以滚动的元素(设置为overflow:scroll的元素),背景图会随元素内容的滚动而滚动,因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。

 

这就是关于background这个复合属性的一些基本知识啦~

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html常用标签

下一篇:Web前端体系的脉络结构