CSS background-image调整大小当我设置background-attachment：fixed [英] CSS background-image resizes when I set background-attachment: fixed

问题描述

我有一个名为page的div。我使用CSS设置其背景图像，使用下面的代码。我的尺寸图像采取的div的宽度的100％，它很好地设置其高度来保持其规模。但是当我设置background-attachment：fixed时，它会调整图像的大小。它增加了图像大小，现在它不适合我的div，所以大部分是剪切。

 <$> 
 
 
 
 
 
 
 $ b c $ c> #page {
 height：100％; 
 width：60％; 
 margin：0 auto; 
 background-image：url（'bg2.jpg'）; 
 -webkit-background-size：100％auto; 
 -moz-background-size：100％auto; 
 -o-background-size：100％auto; 
 background-size：100％auto; 
 background-repeat：no-repeat; 
 background-attachment：fixed; 
} 
  

解决方案

使用 background-size：contains; 大小的背景图片问题。

固定的，尺寸不再适用于携带背景图像的元素，而是它似乎适用于视口，因此它更大，并延伸到原始元素之外。

I have a div named "page". I set its background-image with CSS, using the code below. I size the image to take 100% of the div's width, and it sets nicely its height to keep its scale. But when I set "background-attachment: fixed", it resizes the image. It increases the image size, and now it doesn't fit into my div, so most of it is cut. I will highly appreciate any help.

The CSS code:

    #page {
        height: 100%;
        width: 60%;
        margin: 0 auto;
        background-image: url('bg2.jpg');
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

解决方案

I have just encountered the same issue with a background image sized using background-size: contain;.

When I set the background-attachment to fixed, the sizing no longer applies to the element carrying the background image, but instead it seems to apply to the viewport, so it's much larger and extends beyond the original element.

这篇关于CSS background-image调整大小当我设置background-attachment：fixed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！