Question

在我的项目中，我设置了具有以下属性的背景图像：

$regfile = "m8def.dat"
$crystal = 8000000
Config Lcd = 16 * 2
Config Lcdpin = Pin , Db4 = Portd.4 , Db5 = Portd.5 , Db6 = Portd.6 
,Db7 = Portd.7 , E = Portd.3 , Rs = Portd.2
Config Timer0 = Timer , Prescale = 1
Dim Second As Word , Minute As Word , Hour As Word , Z As Integer
Second = 0
Minute = 0
Hour = 0
Z = 0
Enable Interrupts
Enable Timer0
Enable Ovf0
On Ovf0 Ovfroutin
Timer0 = 0
Start Timer0
Cursor Off
Cls : Home
Lcd "00:00:00"
Do
Loop
End                                                         'end program

Ovfroutin:
  Incr Z
  If Z = 31250 Then
     Stop Timer0
     Z = 0
     Incr Second
     If Second = 60 Then
        Second = 0
        Incr Minute
        If Minute = 60 Then
           Minute = 0
           Incr Hour
           If Hour = 24 Then
              Hour = 0
           End If
           If Hour < 10 Then
              Locate 1 , 1
              Lcd "0"
              Locate 1 , 2
           Else
              Locate 1 , 1
           End If
           Lcd Hour
        End If
        If Minute < 10 Then
           Locate 1 , 4
           Lcd "0"
           Locate 1 , 5
        Else
           Locate 1 , 4
        End If
        Lcd Minute
     End If
     If Second < 10 Then
        Locate 1 , 7
        Lcd "0"
        Locate 1 , 8
     Else
        Locate 1 , 7
     End If
     Lcd Second
     Start Timer0
  End If
  Timer0 = 0
Return

但是当某些页面上有很多元素时，这个图像会拉伸并放大到底部，因此会变得难看。如何做到不可拉伸？这样我就可以向下滚动，那个图像会不变。

以下是CodePen上图像的example。以下是摘录：

body {
  background-image: url("/");
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  background-image: url("http://www.planwallpaper.com/static/images/canberra_hero_image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Answer 1

如果您不希望背景图像拉伸，则不应在元素上设置background-size: cover。将背景大小设置为覆盖意味着将缩放（拉伸）背景图像以适合容器元素的大小。

以下是MDN关于background-size: cover的说法：

尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度。

如果您希望背景图像在向下滚动页面时保持不变，则应将background-attachment: fixed添加到元素中。这样可以保持图像的位置。

以下代码段中的background-position: 50% 50%是一个可选设置，仅用于将背景图像保持在中间 - 中间位置。如果不需要这样的定位，则可以避免这种情况。默认情况下，图像将位于左上角。

body {
  background-image: url("http://lorempixel.com/850/420/nature/1");
  background-position: 50% 50%;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

div{
  height: 100px;
}

<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>

请注意，仅当background-size: cover设置未应用（意味着图像不是常量并且拉伸以适应容器的整个高度/宽度）或图像较小时，background-attachment: fixed才会进行拉伸比容器。如果它大于容器并且应用了background-attachment: fixed设置，则图像不会被拉伸。

background-size: cover需要注意的另一件事是，当图片和容器的大小不同时，the image is clipped at the sides。如果它应该缩小而不是被剪裁，那么也可以使用background-size: 100% 100%。

body {
  background-image: url("http://lorempixel.com/850/420/nature/1");
  background-position: 50% 50%;
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div{
  height: 100px;
}

<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>

如何使背景图像不可拉伸？

1 个答案: