📌  相关文章
📜  背景在小屏幕上拉到角落 - CSS (1)

📅  最后修改于: 2023-12-03 15:27:41.971000             🧑  作者: Mango

背景在小屏幕上拉到角落 - CSS

在移动设备上，很多时候我们需要让背景图片在小屏幕上拉到角落，以达到更好的显示效果。下面介绍一种实现方法。

CSS技巧

在CSS中，我们可以使用如下代码将背景图拉到角落：

background: url(image.jpg) no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

解析：

  • background 属性指定了背景图像的URL，如果没有设置位置，它将默认居中。no-repeat 表示背景不重复，fixed 表示背景固定不动。
  • -webkit-background-size, -moz-background-size, -o-background-size 和 background-size 用来规定背景图像的大小。cover 值会保持图像的纵横比并将图像缩放到完全覆盖所在元素的内容区域，并截取超出的部分。
示例

下面是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: url('https://via.placeholder.com/1500') no-repeat fixed center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is an example of a background image that is centered and fills the screen on mobile devices.</p>
</body>
</html>

运行该示例后，可以在移动设备上，将页面缩小，观察背景图是否随之缩小并保持在角落位置。

注意事项
  • 本方法适用于在小屏幕上拉背景图，如果想在大屏幕上拉，可以设置 max-width 来实现。
  • 背景图片的大小应该足够大，以便在不失真的情况下随设备宽高拉伸变化。
  • 还需要针对不同的设备，调整背景图的大小和位置，以达到最佳效果。
参考文献