用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...

不少同学在设置网站背景图片时会遇到这么一个问题：背景图片总是不能铺满整个屏幕，不是图片太小就是图片被过度放大，显得不太美观。那么 CSS 怎么设置背景图片自适应全屏呢？这篇文章告诉你。

实现效果：

源码：

CSS设置背景图片自适应 - 编程狮(w3cschool.cn)

body{

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

background: url(./image/img1.png);/*图片路径*/

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

实现原理：

首先固定背景图片在屏幕的最上方和最左方。其次将 height 和 width 的值都设置为 100%，还需要设置 min-width，这是为了实现屏幕宽度在 1000px 以内时保持图片大小不变。最后还需要设置背景图片不重复(no-repeat)。

以上就是文章“CSS 怎么设置背景图片自适应全屏？附源码！”的全部内容。想要了解更多 CSS 资料请关注w3cschool。

用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...相关推荐

Python对带光晕的任意纯色背景图像进行去背景色操作（保留透明效果、附源码）
昨天更新了一个去黑色背景的文章,今天发现可以再适用范围上推广一下,前提是知道背景色的RGB值. Python对带光晕的图像进行去黑底黑色背景操作(附源码) 先上效果图除了纯白会导致透明度异常,纯红导 ...
springcloud 图片和数据一起提交_SpringCloud网上商城系统（附源码及教程）
简介设计精良的网上商城系统,包括前端.后端.数据库.负载均衡.数据库缓存等,使用SpringCloud框架,基于Java开发.该项目可部署到服务器上,不断完善中! 预览功能说明用户微服务用 ...
Netty4.x: Server端设置 option 警告 Unknown channel option ‘xxxx‘ for channel 分析及解决 (附源码分析)
一.问题背景: 最近某springboot项目想嵌入一个用户聊天功能,打算使用 Rabbitmq + Netty4.x + Redis 来开发高性能聊天功能.花费三天时间所有功能都已实现.启动时却警告 ...
python如何将图片打包进exe里_用python将图片切分为九宫格并打包成exe可执行文件（附源码）...
前言经常在朋友圈或者微博看到九宫格显示的图片,虽然是九张图片,但是这是一张图片经过切割而成的,显示效果很震撼.今天,我们就用python将图片切分为九宫格,并打包成exe可执行文件,就算不需要代码也 ...
【HTML | CSS】春节将至，为网页挂上精美的灯笼吧（附源码）程序员的浪漫
VC++如何将rc资源中的图片加载到MFC的CImage对象中（附源码）
VC++常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585C++软件异常排查从 ...
【HTML | CSS】我用“一行“代码为CSDN博客主页挂上灯笼（附源码）
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码作品介绍下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...

用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...

用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...相关推荐

最新文章

热门文章