网站背景图等比缩放，不变形

最新推荐文章于 2023-04-23 16:04:57 发布

原创最新推荐文章于 2023-04-23 16:04:57 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #背景图不变形等比缩放

笔记专栏收录该内容

145 篇文章

订阅专栏

在这里插入图片描述

    background: url('../imgs/loginbg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

在这里插入图片描述

1. background: url('../imgs/loginbg.jpg');

2. background-repeat:no-repeat;   // 图片不重复

3. background-position: center center;   // 第一个值：水平位置   第二个值： 垂直位置（x轴y轴都居中对齐）【等同于 background-position: center; 】

4. background-attachment: fixed;   // 当页面的其余部分滚动时，背景图像不会移动。