开发者社区> 问答> 正文

如何保证CSS背景图片不变形?

在网页中用css控制背景图片全屏显示代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bg {
        background: url(http://ww1.sinaimg.cn/large/76fc743bjw1evkctlqixoj21kw0w01ay.jpg) no-repeat;
        background-attachment: fixed;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    </style>
</head>
<body class="bg">
    
</body>
</html>

背景图片确实全屏显示了。 但是把窗口缩小的时候图片变形,如何保证背景图片不变形呀?

展开
收起
杨冬芳 2016-06-06 18:13:41 4973 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    最后的办法就是要写@media了

    @media only screen and (max-width: 1199px) {
      .bg {
        background: url(http://ww1.sinaimg.cn/large/76fc743bjw1evkctlqixoj21kw0w01ay.jpg) no-repeat;
        background-attachment: fixed;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
      }
    }
    2019-07-17 19:29:12
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载