CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

最新推荐文章于 2022-11-01 00:15:52 发布

原创最新推荐文章于 2022-11-01 00:15:52 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

web前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍使用CSS实现背景图片尺寸固定，确保图片不随浏览器窗口缩放而改变大小的两种方法。通过设置background-size: cover及兼容性样式，使背景图片始终保持原始比例并覆盖整个容器。

部署运行你感兴趣的模型镜像

CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

body{ margin:0; padding:0;} 
#con{ 
position:absolute; 
top:0; 
left:0; 
height:100%; 
width:100%; 
background-image:url("maskimg/star.jpg"); 
background-position: center 0; 
background-repeat: no-repeat; 
background-attachment:fixed; 
background-size: cover; 
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */ 
-o-background-size: cover;/* 兼容Opera */ 
zoom: 1; 
}

您可能感兴趣的与本文相关的镜像