如何让HTML页面中的背景图片自适应浏览器高度和宽度(电脑高度和宽度) 您所在的位置:网站首页 网页界面背景图怎么换颜色了 如何让HTML页面中的背景图片自适应浏览器高度和宽度(电脑高度和宽度)

如何让HTML页面中的背景图片自适应浏览器高度和宽度(电脑高度和宽度)

2024-07-13 08:22| 来源: 网络整理| 查看: 265

如何让HTML页面中的背景图片自适应浏览器高度和宽度(电脑高度和宽度)

在今天做项目的时候突然遇到一个问题,我给一个页面加一个背景图片,直接放进去被拉大了,如图所示:

虽然我可以用PS做成我自己的电脑宽度,但是我换一台别人的电脑(分辨率不一样)显示的图片大小完全不一样。

如何解决这个问题呢?

我首先是写css样式,在百度 查阅css3文档,使用background-size: cover;即可,我接着就试了一下:

body { background: url(1.jpg); }

结果显示的是:

这样的话最新浏览器显示没啥问题,但是有的图片高度不会撑满全部,最终解决方案:

body { background: url(1.jpg) no-repeat center center fixed; /*兼容浏览器版本*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }

这样就完美实现了。无论是换一台不同分辨率的电脑还是调整浏览器比例,背景图片的大小永远都不会改变了。

i



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有