css禁止背景图拉伸_css 如何让背景图片拉伸填充避免重复显示

但是

css3

出现以后,这个重复显示的情况被改善了。

background-size

属性可以让我们

之前的让背景图片拉伸填充的希望成真,

具体使用方法如下感兴趣的朋友可以参考下哈,

望对大家有所帮助

如何让背景图片拉伸填充,

这个问题听起来似乎很简单。

但是很遗憾的告诉大家。

不是

我们想的那么简单。

比如一个容器(

body,div,span

)中设定一个背景。这个背景的长宽值在

css2.1

之前是不

能被修改的。

所以实际的结果是只能重复显示,所以出现了

repeat,repeat-x,repeat-y,no-repeat

这些属

性。就是用来控制背景图片的显示的。所以一般用作背景图片的有

2

类:

1.

是一整张大图,尺寸和区域大小刚好吻合

2.

一个很小的条状图,通过

repeat

后,形成一个很规则的大图背景。

但是

css3

出现以后,这个情况被改善了。

background-size

属性可以让我们之前的希望

成真。

而且这个属性在

firefox

chrome

,以及

ie9

上都可以使用。

具体使用方法如下:

背景图尺寸(数值表示方式)

代码如下

:

#background-size{

background-size:200px 100px;

}

背景图尺寸(百分比表示方式)

代码如下

:

#background-size2{

background-size:30% 60%;

}

背景图尺寸(等比扩展图片来填满元素,即

cover

值)

代码如下

:

#background-size3{

background-size:cover;

}

背景图尺寸(等比缩小图片来适应元素的尺寸,即

contain

值)

代码如下

:

#background-size4{

background-size:contain;

}

背景图尺寸(以图片自身大小来填充元素,即

auto

值)

代码如下

:

#background-size5{

background-size:auto;

}

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值