【2023.1.12】HTML移动端背景图自适应CSS

原创 已于 2023-01-12 10:36:34 修改 · 332 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #前端

于 2023-01-12 10:35:20 首次发布
该文章介绍了如何使用CSS实现HTML移动端背景图的自适应效果，通过设置`width:100vw`,`height:100vh`,`background-size:100%100%`以及`background-attachment:fixed`等属性，确保背景图在不同设备上都能全屏且不失真地展示。

【2023.1.12】HTML移动端背景图自适应CSS

.bg {
  width:100vw;
  height:100vh;
  padding: 0;
  margin: 0;
  background-attachment: fixed;
  -webkit-background-attachment: fixed;
  background: url("bg.jpg") no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
CSS - 移动端容器背景大图片自动适应屏幕
🏆 前端领域优质创作者
03-11 3291
前言 有时候，我们希望容器背景大图片自动适用容器宽高，均匀平铺在页面，几行 CSS 代码即可搞定。 实现 给父容器设置即可。 .view{ background-image: url(x.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } ...
88web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
HTML、CSS和JavaScript是构建网页和移动应用的基础，此资源包"88web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip"提供了一套完整的移动端网页设计素材，包括HTML结构、CSS样式以及...
移动端背景图片自适应
炫爱小七的博客
06-10 2648
移动端背景图片自适应 /*兼容安卓手机没有高度导致无法显示背景图片*/ body{ width:100vw; height:100vh; padding: 0; margin: 0; background-image: url("../img/common.png"); background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-size: 100%
移动端背景图全屏自适应
weixin_44860440的博客
05-27 1153
html <div class="code"> < img src="图片地址.jpg"/> </div> css .code{ position:absolute; z-index:-1; width:100%; height:100%; top:0px; left:0px; } img{ width.
移动端背景图自适应
weixin_30276935的博客
11-06 885
/*兼容安卓手机没有高度导致无法显示背景图片*/ html,body{ width:100%; height:100%; } body { background: url(../../image/download.jpg); background-repeat: no-repeat; background-size: 100% 100%;...
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
weixin_30902251的博客
03-07 693
1 设置背景图片的两种方式： 方式一： <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; ...
质感深色背景企业网站模板3182_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-05
html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip”包含了用于构建企业网站的完整资源，特别强调了深色背景设计、HTML5技术、CSS3样式以及移动端前端的自适应响应式布局。以下是对这些知识点的详细解释...
个性的木纹背景个人博客模板4640_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-05
此模板不仅限于桌面端，它还具有移动端前端和H5模板的功能，这意味着它能够自适应不同的设备屏幕大小，无论是电脑、平板还是手机，都能提供流畅的浏览体验。 模板的核心技术栈包括JavaScript (JS) 和层叠样式表(CSS...
亮丽背景企业产品展示类模板7446_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-05
该压缩包文件“亮丽背景企业产品展示类模板7446_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip”包含了用于创建一个具有亮丽背景的企业产品展示网站的完整HTML源码。这个模板设计适用于希望在互联网...
css3简洁时尚商务整站企业模板2769_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-04
1. CSS3：CSS3是CSS（层叠样式表）的最新版本，提供了许多新特性，如选择器层级、过渡效果、动画、多列布局、阴影、边框和背景图像处理等。在这个模板中，CSS3被用来创建平滑的动画效果、响应式布局以及增强视觉吸引...
Tailwind CSS 设置 设置背景图片 ＜div＞1＜/div＞ 宽200px高134px 移动端自适应
最新发布
weixin_44303625的博客
11-02 987
要使用 Tailwind CSS 设置背景图片并确保在移动端自适应，你可以这样写：styleurl'你的背景图片链接';
H5页面移动端背景图以及文字适配方法
wxxmagic的博客
01-07 4469
H5页面适配的方法 背景的适配 给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100% 背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为 background-size: 100% 100%; 那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形） 为了让背景不变形有两种方法 固定宽填充整个屏幕，让高自适应 background-size: 100% auto;
背景图片自适应铺满整个手机屏幕
pig_ning的博客
05-29 718
背景图片自适应铺满整个手机屏幕
移动端，手机软件盘抬起背景图片压缩问题(背景图片自适应)
wangjie的博客
04-08 792
移动端，因为手机自带键盘抬起背景图片发生压缩，且背景图片自适应不同型号的机型或平板问题解决。问题发生的原因：(一)、使用标签有问题造成的后果(二)、css样式中用width:100%;height:100%；属性控制背景图片大小造成的后果最终解决方法(三)、vue同理解决（动态更改Style里height值，mounted 监听页面高度） 先放效果成品 问题发生的原因： (一)、使用标签有问题 习惯情况下我将背景图片放在了ion-content标签里 //背景图片直接放在了ion-content里 &
纯css移动端图片的自适应
weixin_45170083的博客
04-02 2799
移动端页面，少不了图片，但是手机端要适应的平台相对较多，如果图片写死了，多平台会很难看，只有图片宽和高同时动态响应才可以。 那么了解下图片的等比例适配 position: relative; background-color: #FFFFFF; width: 100%; height: 0; padding-botto...
css小技巧 移动端背景高宽等比例自适应
qq_37683424的博客
10-25 5383
移动端背景等比例缩放，一般实现方法是，直接使用css3的background-size，但是有缺陷，高度不能固定缩放， 如果高度background-size： 100% 100%； 图片会变形，还有实现方法是用js来控制高度。 如果用css来实现，在网上找半天终于找到一种方法，宽度100%，图片都能等比例 小技巧,就是padding-bottom是按照父元素的宽度比计算的,而不是按高度算,...
移动端图片自适应全屏铺满屏幕
怎奈你何的博客
08-06 1090
移动端背景图自适应
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
weixin_29122543的博客
06-21 1323
.login {background: url(img/login.jpg) no-repeat center center;background-size: cover;background-attachment: fixed;//当页面的其余部分滚动时，背景图像不会移动。width: 100%;height: 100%;position: fixed;top: 0;left: 0;right:...
响应式H5网站模板：移动端前端源码自适应解决方案
资源摘要信息:"322_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip" 网站模板是一种预先设计好的网页布局和结构，供网站开发者使用以快速搭建网站。"322_html网站模板"针对的是移动端用户，意味着它...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值