（实用）移动端背景图，铺满页面

最新推荐文章于 2021-06-10 11:55:50 发布

原创最新推荐文章于 2021-06-10 11:55:50 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨了CSS中背景属性的运用，重点介绍了background-attachment、background-repeat和background-size的使用技巧，帮助读者掌握如何创建固定背景、避免背景平铺及调整背景尺寸。

小小的问题，往往使我们最容易疏忽的

.give-book {
    background: url("../images/bg-book.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

fixed

当页面的其余部分滚动时，背景图像不会移动。

background-repeat: no-repeat; 背景不平铺

background-size: 100% 100%; 设定背景图像的尺寸

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叫我虫虫吧

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Html5移动web还原PS设计布局（更好的了解html5页面，记录快捷操作，CSS关键技巧设置）

jimoluoluo1989的专栏

11-13

339

更好的了解html5页面，记录快捷操作，更快捷的编码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

pc端和移动端背景图全屏自适应大小写法

weixin_46276411的博客

10-25

883

参与评论您还未登录，请先登录后发表或查看评论

移动端背景图铺满屏幕

qq_37012533的博客

01-29

1319

&lt;div class="divBox"&gt; &lt;/div&gt; .divBox{ background: url(../images/bg1.png); position: fixed; width: 100%; height: 100%; background-size:cover; } 亲测这样写会失真，有些手机会把图片拉...

移动端背景图固定

AnlanJion的博客

11-19

824

移动端添加背景图，让背景图不跟随内容而滚动 body{ width：100%； height:auto; background:url('1.png') no-repeat; background-size:100% 100%; background-attachment：fixed; } background-attachment:fix...

移动端背景图片自适应

炫爱小七的博客

06-10

2653

移动端背景图片自适应 /*兼容安卓手机没有高度导致无法显示背景图片*/ 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%

CSS 移动端PC端背景图全屏满屏显示

深漂小码哥

06-02

869

html: <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="

HTML背景图片自适应实现方法与源码解析

例如，通过将背景图设置在一个相对定位的父容器中，并使用绝对定位使其铺满整个父元素，再配合`top: 0; left: 0; width: 100%; height: 100%;`等样式规则，可以确保背景图始终贴合容器边界。同时，利用`background-...

一张图片放两个二维码_经验 | 图片排版的「17个实用技巧」

weixin_39863155的博客

12-13

5839

本专栏（平面设计学习日记），每日分享1~2篇精选设计文章。本文转载自：葱爷（微信公众号），欢迎关注原作者！阅前叨逼叨：在很多排版中，如果拍好了图片，就等于完成了设计的一大半！排版的难处在于，我们不是根据已经设计好的版面来填充内容（套模板），而是要根据具体的内容来布局版面，比如版面中的图片有时候是一两张，有时候是十张八张，由于构成元素的不同，导致采用同样的构图、版式、形式往往是行不通的，所以葱爷今天...

200套淘宝天猫店铺装修模板合集

本套“200套淘宝天猫店铺装修模板”正是基于这一背景开发而成，其核心价值在于提供标准化、模块化、可复用的设计方案，使中小商家即使不具备专业的设计团队，也能通过简单的替换图片和文字内容，实现媲美大品牌的...

Paralmax.js：轻量级响应式视差插件，支持全屏背景与多设备适配

paralmaxjs 通过智能计算背景图的尺寸与位置，并结合 CSS 的 `background-size: cover` 等机制，在不破坏原始布局的前提下，自动调整背景填充方式，使得无论在桌面端还是移动端，背景图像都能无缝铺满目标区域，实现...

移动端h5单页面背景占满全屏

热门推荐

holily_的博客

06-06

1万+

<div class="ceshi"></div> <style lang="scss"> .ceshi{ max-width: 375px; //按一倍图适配 overflow: hidden; height: 100%; position: absolute; left: 0px; width: 100%; top: 50%; ...

移动端使用background添加背景图方法总结

移动端使用background添加背景图方法总结

11-27

7186

移动端使用background添加背景图方法总结最近刚做完移动端的一个推广页面，里头的一部分内容需要用到css中的background来添加背景图。在实现的过程中，遇到了好多问题。由于移动设备有不通的屏幕尺寸，这就导致了在用background添加背景图片时会出现难以自适应的问题。再者背景图是根据内容进行变化的，内容有多高，背景图片就会有多高，随着屏幕尺寸的变化，背景图便会出现不同程度的拉伸和压...

Android实现背景图与状态栏融合

走马川行雪的博客

07-20

2396

1、在res/values/style.xml中添加如下内容： <resources>  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  <item name="colorPri

移动端设置固定比例的盒子，让图片铺满盒子，并设置默认图片

见贤思齐

03-19

1890

需求：因为后端传过来的照片比例是不固定的，所以前端得固定一个统一的比例。又因为是在移动端所以图片盒子还得适配移动端。再者因为图片比较多，所以给一个默认图片可以优化用户的体验。 1.固定比例的盒子 2.盒子适配移动端 3.图片铺满盒子 4.默认图片 1.固定比例的盒子&盒子适配移动端 现在需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式。有多种...

H5页面移动端背景图以及文字适配方法

wxxmagic的博客

01-07

4482

H5页面适配的方法背景的适配给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100% 背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为 background-size: 100% 100%; 那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形）为了让背景不变形有两种方法固定宽填充整个屏幕，让高自适应 background-size: 100% auto;

Android Theme设置背景图片，底部被导航栏遮盖

lnkywd的博客

04-20

7803

现在启动页消除点击时的黑屏，自然比较简单的方法就是在 Theme 中设置背景了，这个应该都知道。今天设置背景时，在有导航栏的手机上跑，发现底部的图片有一部分被导航栏遮盖了，就找了下原因。被遮盖时的主题设置和图片设置。 @drawable/splash_bg true true <layer-list xmln

移动端固定背景

boKeB1

07-25

256

content: ""; background: ; background-size: ; position: fixed; top: 0; left: 0; bottom: 0; right: 0; ...

html移动端背景图片大小,移动端怎么样让图片宽高比例正好适应手机当前屏幕全屏大小？...

weixin_28839601的博客

06-09

2747

根据需求来看，建议通过css的背景属性来设置；第一步，先添加一个屏幕大小的DOM元素；或者直接在你的imgsrc上设置，前提是imgsrc的大小是屏幕大小；第二步：设置元素的css属性：一楼说的是下面这种，不会拉伸图片；通过调整background-position这个属性来控制图片位置，我也推荐这种写法：background-image: url('链接');background-size: c...