• 首页
  • html5
  • css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化

css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化


传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?

  1. 拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)

  2. 重复展示(用无数张同样的图片来铺满容器的背景面积)

  3. x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )


background-repeat 这个货

看下它的值:

repeat         默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次(无节操拉伸)。

inherit         规定应该从父元素继承 background-repeat 属性的设置。



很明显,上面的 css2 满足不了这种需求.

但是强大的css3 扩展了一些很有用的属性来实现这样的效果.


在 css3 中,一下三个属性都新增了部分属性值.

background-image

background-repeat

background-position 


主要说下 background-repeat 属性新增的属性值


css3 中 background-repeat 可以用2个属性值来表示,如下:

background-repeat: repeat no-repeat;

上面我们看到 value 处有2个值,前面表示 x轴,后面表示 y轴


它的效果等同于下面的写法: (仅在x轴重复显示)

background-repeat: repeat-x;


新增 space和round属性值,它弥补了之前css2 中无休止贴瓷砖模式的重复平铺,超出就裁剪,让背景图的控制尽量做到完美.

下面我们分别来看下 space 和 round 属性值:


space:

背景图在水平和垂直方向平铺且不裁剪.两端对齐,中间填补空白,背景图大小不变 (这里应该注意 不裁剪,两端对齐)


round:

将背景图在水平和垂直方向平铺且不裁剪.但是背景图片可能被拉伸或缩短 (注意 不裁剪, 可以伸缩,有可能拉伸)


因为背景图小于填充容器面积时,图片在重复平铺时会遵循四舍五入的原则,

如果容器面积不能放下4个半图片时,那么就会显示4张图片(4张被拉伸的图片)

如果容器面积可以放下大于4个半时,那么容器会挤进去5张图片


background 在css3 中新增了3个属性

background-origin

background-clip

background-size


下面简单介绍下:

1.background-origin

这个是一个背景图定位的属性,貌似和 css2.0 中的 background-position 功能一致,但是存在就是合理的.

他的主要特定更多是定位容器.简单说就是 这个背景图该放在哪个盒子里.

然后再使用 background-position 来定位图片的精准位置,搭配使用更加强大.


2.background-clip

在背景区域中,背景图片需要裁减的位置

background-clip : border-box | padding-box | content-box | no-clip;

默认值:border-box




3.background-size

字面意思看到他是控制背景大小的.它允许背景被拉伸或者被压缩.

background-size: auto | <长度值> | <百分比> | cover | contain

参数:

auto:默认值,不改变背景图片的原始高度和宽度。

<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值;当设置一个值时,将其作为图片宽度值,高度被设置为"auto",且高度等比缩放

<百分比>:0%~100%之间的任意值,将背景图片宽高依次设置为所在元素宽高【并不是图片默认的宽高】乘以前面百分比得出的数值,一个值时,高度等比缩放。

经常用下面代码在网站中适应全屏幕背景。

cover ,contain 可以确定背景图片在容器中等比缩放,其他的内容记不住,你也不需要记,需要的时候 google

cover 和 contain 都是等比缩放,又有什么细微的差别呢?


容器与背景图

长度比:150/100=1.5

宽度比:60/50=1.2

cover 取大,所以就按照 长度比 1.5 (等比缩放背景图片)

contain 取小,所以就按宽度比 1.2 (等比缩放背景图片)


现在我们有一个如下的需求:

需求:

那么我们现在需要一个div里面的背景图在div 宽度变化时(水平拉伸浏览器宽度)背景的图片不能变形,并且根据div大小,图片也要自动缩放(这里的缩放是指横纵放心的成比例缩放)


看图片1


看图片2


上面的红框表示div的可视区域,这张背景图其实很大 (2800x880)

当我们把div 可视区域从图1 拉到 图2 的情况时,你可以发现背景图左侧的小汽车没有被拉伸,最后右侧的小汽车也进入了我们背景图可视范围内.感觉上在容器逐渐缩放时,背景图是跟着缩放的感觉,有木有!


但是,问题来了,如果我们的div 拉伸到比背景图片还大的时候 (水平宽度>2800px) 而我们又不允许图片重复平铺,这时会出现背景图 可能会被拉伸


这个可能性取决于你的容器可视大小是否超出了背景图最大size ,否则背景图将会成比例缩放.


看下这个style 的写法:

<div style=" margin: 0 auto;height: 440px;background-color: #f8f8f8;background-image:url(static/bj.png);background-repeat:no-repeat;background-size: cover;">




回到顶部