今后地位:首页 > 建站常识 > 列表

css背景图片100%显现

点击: 次时候:2016/12/10关头词:css背景图 上海网页设想
上海网页设想 若何用css背景图片拉伸 和100% 满屏显现呢?这个题目听起来仿佛很简略。可是很遗憾的告知大师。不是咱们想的那末简略。比方一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被点窜的。 以是现实的结

css背景图片100%显现

上海网页设想 若何用css背景图片拉伸 和100% 满屏显现呢?这个题目听起来仿佛很简略。可是很遗憾的告知大师。不是咱们想的那末简略。

比方一个容器(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; }  

预定建站
收费供给网站优化
支付关头词