在后台拉伸和缩放CSS图像 - 仅限CSS-Java 学习之路

765

我希望我的背景图像拉伸和缩放取决于浏览器视口大小 .

我已经看到了Stack Overflow上的一些问题，比如Stretch and scale CSS background . 它运行良好，但我想使用 background 放置图像，而不是 img 标记 .

在那一个中放置一个 img 标签，然后用CSS我们向 img 标签致敬 .

width:100%; height:100%;

它有效，但这个问题有点陈旧，并指出在CSS 3中调整背景图像的大小将会很好 . 我试过这个example the first one，但它对我来说没有用 .

使用 background-image 声明有一个很好的方法吗？

20 回答

使用这个CSS：

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

回复于 2024-04-28T01:13:24+08:00

181
为了根据容器大小适当缩放图像，请执行以下操作：
```
{
background-size:contain;
background-repeat: no-repeat;
}
```
回复于 2024-04-28T01:13:24+08:00
162

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

回复于 2024-04-28T01:13:24+08:00
10
我使用了background-X css属性的组合来实现理想的缩放背景图像 .
```
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
```
这使得背景始终覆盖整个浏览器窗口并在缩放时保持居中 .
回复于 2024-04-28T01:13:24+08:00
13

CSS3有一个很好的小属性叫 background-size:cover .

这会缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比 . 将覆盖整个区域，但如果调整大小的图像的宽度/高度太大，则部分图像可能不可见

回复于 2024-04-28T01:13:24+08:00

CSS：

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

回复于 2024-04-28T01:13:24+08:00

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

在线图片：------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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%;
}

回复于 2024-04-28T01:13:24+08:00

16

使用Backstretch插件 . 人们甚至可以滑动几张图像 . 它也适用于容器 . 这种方式例如可以仅用背景图像覆盖背景的一部分 .

因为即使我可以让它工作证明它是一个易于使用的插件:) .

回复于 2024-04-28T01:13:24+08:00
0
您可以将此类添加到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支持非供应商前缀版本）
回复于 2024-04-28T01:13:24+08:00
14
谢谢！

但后来它不适用于Google Chrome和Safari浏览器（拉伸工作，但图片的高度只有2毫米！），直到有人告诉我缺少什么：

尝试设置高度：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 themes style.css 中有这个：

html，body {height：100％;} #page {background：#ffffff; height：auto！important; height：100％; min-height：100％; position：relative;}

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

<img alt =“”class =“stretch”src =“pic.url”/>

只是用Drupal块中的编辑器复制图片不起作用;必须将编辑器更改为非格式化文本 .
回复于 2024-04-28T01:13:24+08:00
9
使用code我提到过......

HTML
```
<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>
```
CSS
```
#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}
```
这产生了预期的效果：只有内容会滚动，而不是背景 .

对于任何屏幕大小，背景图像会调整大小到浏览器视口 . 当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中 .

使用CSS 3，这似乎会更容易 .
回复于 2024-04-28T01:13:24+08:00
8
你可以使用CSS3属性来做得很好 . 它调整到比例，因此没有图像失真（虽然它可以放大小图像） . 请注意，它尚未在所有浏览器中实现 .
```
background-size: 100%;
```
回复于 2024-04-28T01:13:24+08:00
7

您可以使用 border-image : yourimage 属性将图像缩放到边框 . 即使您提供背景图像，也会在其上绘制边框图像 .

如果你的样式表是在不支持CSS3的地方实现的，那么border-image属性非常有用 . 如果您正在使用firefox的chrome，那么我推荐 background-size:cover 属性本身 .

回复于 2024-04-28T01:13:24+08:00

我使用它，它适用于所有浏览器：

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>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.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

回复于 2024-04-28T01:13:24+08:00

-1
```
background-size: 100% 100%;
```
拉伸bg以填充两个轴上的整个元素
回复于 2024-04-28T01:13:24+08:00

453

The following CSS part should stretch the image with all browsers.

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

<html style="
      background: url(images/'.$pic.'Bg.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/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

如果所有页面只有一张背景图片，则可以删除 $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 .

回复于 2024-04-28T01:13:24+08:00

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

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

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

此外，对于SEO，我会将背景图像放在页面底部，但如果背景图像加载时间过长（即最初为白色背景），则可以移动到页面顶部 .

回复于 2024-04-28T01:13:24+08:00

935

使用这个CSS：

background-size: 100% 100%

回复于 2024-04-28T01:13:24+08:00

由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;
}

回复于 2024-04-28T01:13:24+08:00

39

你想用一张图片来实现吗？因为你实际上可以使用两个图像使拉伸背景有些类似 . 例如PNG图像 .

我以前做过这件事，并不是那么难 . 此外，我认为伸展只会损害背景质量 . 如果你添加一个巨大的图像，它会减慢慢速计算机和浏览器的速度 .

回复于 2024-04-28T01:13:24+08:00

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

20 回答

HTML

CSS

相关问题