2023年6月21日发(作者：)
CSS背景图⽚⾃适应、全屏、填充、拉伸⽅法⼀、js控制：1< div id = "formbackground" style = "position:absolute; width:100%; height:100%; z-index:-1" >
2< img src = "pictures/" height = "100%" width = "100%" />
31< div id = "formbackground" style = "position:absolute; z-index:-1;" >< img src = "" height = "100%" width = "100%" />2< script type = "text/javascript" >3$(function(){4 $('#formbackground').height($(window).height());5 $('#formbackground').width($(window).width());6});7⽅法⼆、全浏览器兼容：01.
02.
03.
04.
05.
06.
.bg{
background:url(/wp-content/uploads/);
filter:"progid:mageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}总结：做响应式布局的时候，如果有背景图，我们当然希望他能够全屏100%显⽰，这样显得页⾯⾮常的爆满，不过这⼜出现了⼀个问题，图⽚的尺⼨多⼤合适呢，现在的浏览器分辨率参差不齐，对于Firefox等⾼级的浏览器，使⽤Background-size设置为100%即可，⽽IE浏览器就需要不同设置。背景100%填充在Firefox中，只需要⽤background-size则可以控制其随容器的⼤⼩⽽⾃动伸缩.picLUp{ background:url() no-repeat; width:100%; height:40%; background-size:100% 100%;}在这样的CSS控制之下，则可以在Firefox中达到背景图⽚随⽗容器⼤⼩⽽⾃动变化，达到填充效果，图⽚会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置100%参数，⽽是使⽤cover参数。background-size:cover设置cover参数以后，背景图会按⽐例缩放填充满整个背景。针对IE浏览器但是在IE之下，你会发现上⾯的CSS控制会很不理想，它并不会因为你有了background-size:100% 100%;⽽⾃动缩放，图⽚原本怎么样就怎么样显⽰，如果容器⽐图⽚⼩，则只能显⽰图上的⼀部分，那么要达到这个效果，则需要使⽤IE特有的滤镜。AlphaImageLoaderAlphaImageLoader兼容性在IE5.5+以上版本的浏览器上都可以完美运⾏。语法filter : progid:mageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )属性enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |
falsetrue: 默认值。滤镜激活。false: 滤镜被禁⽌。sizingMethod: 可选项。字符串(String)。设置或检索滤镜作⽤的对象的图⽚在对象容器边界内的显⽰⽅式。crop: 剪切图⽚以适应对象尺⼨。image: 默认值。增⼤或减⼩对象的尺⼨边界以适应图⽚的尺⼨。scale: 缩放图⽚以适应对象的尺⼨边界。src: 必选项。字符串(String)。使⽤绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作⽤。特性Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。src: 可读写。字符串(String)。参阅 src 属性。说明在对象容器边界内，在对象的背景和内容之间显⽰⼀张图⽚。并提供对此图⽚的剪切和改变尺⼨的操作。如果载⼊的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图⽚的透明度不妨碍你选择⽂本。也就是说，你可以选择显⽰在PNG(Portable Network Graphics)格式的图⽚完全透明区域后⾯的内容。hello{ width:10%; height:50%; position:absolute; filter:progid:mageLoader(src='',sizingMethod='scale');}
2023年6月21日发(作者：)
CSS背景图⽚⾃适应、全屏、填充、拉伸⽅法⼀、js控制：1< div id = "formbackground" style = "position:absolute; width:100%; height:100%; z-index:-1" >
2< img src = "pictures/" height = "100%" width = "100%" />
31< div id = "formbackground" style = "position:absolute; z-index:-1;" >< img src = "" height = "100%" width = "100%" />2< script type = "text/javascript" >3$(function(){4 $('#formbackground').height($(window).height());5 $('#formbackground').width($(window).width());6});7⽅法⼆、全浏览器兼容：01.
02.
03.
04.
05.
06.
.bg{
background:url(/wp-content/uploads/);
filter:"progid:mageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
}总结：做响应式布局的时候，如果有背景图，我们当然希望他能够全屏100%显⽰，这样显得页⾯⾮常的爆满，不过这⼜出现了⼀个问题，图⽚的尺⼨多⼤合适呢，现在的浏览器分辨率参差不齐，对于Firefox等⾼级的浏览器，使⽤Background-size设置为100%即可，⽽IE浏览器就需要不同设置。背景100%填充在Firefox中，只需要⽤background-size则可以控制其随容器的⼤⼩⽽⾃动伸缩.picLUp{ background:url() no-repeat; width:100%; height:40%; background-size:100% 100%;}在这样的CSS控制之下，则可以在Firefox中达到背景图⽚随⽗容器⼤⼩⽽⾃动变化，达到填充效果，图⽚会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置100%参数，⽽是使⽤cover参数。background-size:cover设置cover参数以后，背景图会按⽐例缩放填充满整个背景。针对IE浏览器但是在IE之下，你会发现上⾯的CSS控制会很不理想，它并不会因为你有了background-size:100% 100%;⽽⾃动缩放，图⽚原本怎么样就怎么样显⽰，如果容器⽐图⽚⼩，则只能显⽰图上的⼀部分，那么要达到这个效果，则需要使⽤IE特有的滤镜。AlphaImageLoaderAlphaImageLoader兼容性在IE5.5+以上版本的浏览器上都可以完美运⾏。语法filter : progid:mageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )属性enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |
falsetrue: 默认值。滤镜激活。false: 滤镜被禁⽌。sizingMethod: 可选项。字符串(String)。设置或检索滤镜作⽤的对象的图⽚在对象容器边界内的显⽰⽅式。crop: 剪切图⽚以适应对象尺⼨。image: 默认值。增⼤或减⼩对象的尺⼨边界以适应图⽚的尺⼨。scale: 缩放图⽚以适应对象的尺⼨边界。src: 必选项。字符串(String)。使⽤绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作⽤。特性Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。src: 可读写。字符串(String)。参阅 src 属性。说明在对象容器边界内，在对象的背景和内容之间显⽰⼀张图⽚。并提供对此图⽚的剪切和改变尺⼨的操作。如果载⼊的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图⽚的透明度不妨碍你选择⽂本。也就是说，你可以选择显⽰在PNG(Portable Network Graphics)格式的图⽚完全透明区域后⾯的内容。hello{ width:10%; height:50%; position:absolute; filter:progid:mageLoader(src='',sizingMethod='scale');}
发布评论