Question

我正在尝试设置我的页面，因此背景不会随页面滚动。但是，我想为背景图像设置最小尺寸，因此如果用户调整其窗口大小，它将不会低于我的最小尺寸，然后强制滚动...这可能吗？我的窗口设置为最小宽度1024px，所以我希望我的背景总是至少跨越1024px宽。

**当我谈论我的背景时。我的图像基本上是一个图像重复两次，但第二个图像是水平翻转的。我怎么能实现它，所以它是通过css复制而不是手动完成并加载两倍大的文件？

这就是我现在所拥有的。它适用于不滚动的背景，但我不确定如何设置它的最小尺寸。

body {
    min-width: 1024px;
    min-height: 700px;
    max-width: 1920px;
    max-height: 1080px;

    width: 90%;
    height; 90%;

    background: url(/style/images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    <!-- FOR IE -->
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

Answer 1

您可能想要更改＆＃34; cover＆＃34;如果浏览器窗口最小化到某个阈值，则在background-size上。考虑使用媒体查询：

    @media screen and (max-width: 1024px) { 
    body { background-size: 1100px; 
    (or whatever)

         }
                                          }

Answer 2

background-image:url("img_tree.png");

background-repeat:no-repeat;

background-position:right top;

background-attachment:fixed;

你可以用这种方式尝试背景图像

Answer 3

你可以做一些事情......第一个就是取出＆＃34;固定＆＃34;财产，并保持一切完全相同。该图片可以找到here。

<强>之前：

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center fixed;

<强>后：

background: url(http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg) no-repeat center center;

接下来，您可以尝试将两个图像彼此相邻并将图像翻转为水平，但实际上，您可能最好只是将两个图像组合并镜像，就像您已经完成的那样。这是另一个link找到你确实可以将两个图像放在一起。

现在有趣的部分出现在你需要翻转一张图像并保持另一张图像相同时（因此为什么你更容易保留单张图像照片）。代码如下：

-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";

但是，我只能在不是背景图像的情况下翻转照片，在下一个link中，你会发现我使用div标签为图像制作了一个容器。

我希望你喜欢小猫。

固定背景

3 个答案: