css 背景图片 不拉伸 |dw如何作用外部css

在网页设计中，背景图片是经常使用到的元素之一。然而，有时候大家希望背景图片在不失真的情况下不拉伸，怎么实现呢？ 首先，大家需要在CSS中指定背景图的大小，可以使用background-size属性来实现。如果大家想让背景图片不失真且大小不变，可以使用background-size属性的值”auto”，如下代码所示：

p {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat;
background-size: auto;
}

这样，背景图片就会以原本的大小呈现，不拉伸也不失真。但是，这样的背景图片可能会被裁剪，如果大家想让图片完整地显示出来，可以使用background-position属性来控制图片的位置，如下代码所示：

p {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat;
background-size: auto;
background-position: center center;
}

这样，背景图片就会在p标签的中央完整地显示出来，而且不会被拉伸。 除了使用”auto”以外，大家还可以使用”cover”和”contain”来控制背景图片的大小。”cover”表示将图片缩放到能完全覆盖背景区域，可能会被裁剪，而”contain”则表示将图片缩放到能够完整地显示在背景区域内，不会被拉伸或裁剪。 综上所述，通过设置background-size属性的值，大家可以轻松地控制背景图片的大小，让其在不失真的情况下不被拉伸。如果你还想要更多的控制，可以使用background-position属性来调整图片的位置。