在后台拉伸和缩放CSS图像 - 仅限CSS

background-size: 100% 100%; 

拉伸bg以填充两个轴上的整个元素

以下CSS部分应该使用所有浏览器拉伸图像.

我为每个页面动态执行此操作.因此,我使用PHP为每个页面生成自己的HTML标记.所有图片都在'image'文件夹中,以'Bg.jpg'结尾.

如果所有页面只有一张背景图片,那么您可以删除$pic变量,删除转义反斜杠,调整路径并将此代码放在CSS文件中.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

这是使用Internet Explorer 9,Chrome 21和Firefox 14测试的.

实际上,您可以使用img标签获得与背景图像相同的效果.您只需将其z-index设置为低于其他所有值,设置position:absolute并为前景中的每个框使用透明背景.

使用这个CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

您可以将此类添加到CSS文件中.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

它适用于:

Safari 3或更高版本

Chrome随时随地

Internet Explorer 9或更高版本

Opera 10或更高版本(支持Opera 9.5 background-size,但不支持关键字)

Firefox 3.6或更高版本(Firefox 4支持非供应商前缀版本)

由css-tricks解释 https://css-tricks.com/perfect-full-page-background-image/

演示:https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

代码:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

为了根据容器大小适当缩放图像,请执行以下操作:

background-size: contain;
background-repeat: no-repeat;

我使用它,它适用于所有浏览器:

    
        
        
        
        
    
    
        

        

            
Stretch that Background Image!
            
This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.
            
Go on, try it - resize your browser!
        
    

谢谢!

但后来它不适用于谷歌浏览器和Safari浏览器(拉伸工作,但图片的高度只有2毫米!),直到有人告诉我缺少什么:

尝试设置 height:auto;min-height:100%;

所以改变你的height:100%;行,给出:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

就在新添加的代码之前,我在Drupal Tendu主题中有这个style.css:

html,body {height:100%;}

#page {背景:#FFFFFF; height:auto!important; height:100%; min-height:100%; position:relative;}

然后我必须在Drupal中使用图片创建一个新块,同时添加class=stretch:

只是用Drupal块中的编辑器复制图片不起作用; 必须将编辑器更改为非格式化文本.

我同意绝对div中的图像,宽度和高度均为100%.确保在CSS中为主体设置100%的宽度和高度,并将边距和填充设置为零.使用此方法可以发现的另一个问题是,在选择文本时,选择区域有时可能包含背景图像,这会使整页具有选定状态,这会产生令人遗憾的效果.您可以使用user-select:noneCSS规则来解决这个问题,如下所示:

    
        
    
    
        

            content here
        
        

    

同样,Internet Explorer在这里是坏人,因为它无法识别用户选择选项 - 甚至Internet Explorer 10预览都不支持它,因此您可以选择使用JavaScript来防止选择背景图像(例如,http ://www.felgall.com/jstip35.htm)或使用CSS 3 background-stretch方法.

此外,对于搜索引擎优化,我会将背景图像放在页面的底部,但如果背景图像加载时间过长(即最初使用白色背景),则可以移动到页面顶部.

我想中心和缩放背景图像,而不是将其拉伸到整个页面,我希望保持纵横比.这对我有用,这要归功于其他答案中提出的变化:

在线图片:------------------------

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

我结合使用了background-X CSS属性来实现理想的缩放背景图像。

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

这使得背景始终覆盖整个浏览器窗口，并在缩放时保持居中。