css实现背景图PC端/手机端自适应

最新推荐文章于 2024-06-17 10:49:59 发布
最新推荐文章于 2024-06-17 10:49:59 发布
阅读量1.1w 收藏 7
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdali/article/details/77905701
版权

css代码：

@charset "utf-8";

*{
	margin: 0px;
	padding: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}
a{
	text-decoration: none;
}
html{
	width: 100%;
	height: 100%;
	overflow-x:hidden; 
	overflow-y:auto;
}
body{
	width: 100%;
	min-height: 100%;
}
.login-bg{
	 background:url(./bg.png) no-repeat center;
    background-size: cover;
    overflow: hidden;
}

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="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<body class="login-bg">
//你的内容
</body>
</html>

k7Cx7e
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS 移动端PC端背景图全屏满屏显示
深漂小码哥
06-02 689
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="
手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
LYJ个人博客，记录技术、八卦、生活，分享各种心得，期待与朋友们一同进步
11-14 1万+
老生常谈，老手跳过，新手进来。 思路：图片不要设置为div的background，因为你设置了background-size，但是div的height没设置，一样没鸟用，除非你搞个js判断，动态刷新。 换一种思路，直接用显示出来，这样div作为父容器就被你撑大，就不需要div的高度设置了。 然后就看你的图片，如果宽要全部显示，就设置为width:100%,height:auto，反之就设置为
4种CSS实现全屏背景图片铺满自适应的方式，最后一种尤其简单
最新发布
(黎子)人生编码
06-17 3573
在Web设计中，背景图片是提升页面视觉效果的重要元素。实现背景图片全屏铺满且自适应是常见的需求。本文将介绍三种CSS技术，用以确保背景图片能够优雅地填充整个屏幕并适应不同设备。
css设置两张背景图片
m0_59930878的博客
07-29 1665
css设置背景图，想实现的效果是左边一张图大概占整个屏幕的50%,右边右上角有一张图片大概占屏幕的20%。 body { background:url("") no-repeat left bottom , url("") no-repeat right top; background-size: 50% auto, 20% auto; } ...
图片轮播效果兼容PC和H5页面
developerFBI的专栏
04-13 405
实现的原理：首先把要轮播的图片通过ul li显示在一行。然后把ul li img图片全部隐藏起来.最后把图片按从左向右的顺序时行 显示，根据要显示的图片宽度作为距离来显示对应图片。 1、直接上html代码 <html> <head> <title>图片滑动</title> <link rel="stylesheet" href="pi...
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
qq_34328404的博客
09-19 1万+
1 设置背景图片的两种方式： 方式一：  .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二：div class="body" id="Background"> .body{ width: 100%; height: 100%; position:
支持PC端手机端幻灯片代码.zip
07-05
本压缩包"支持PC端手机端幻灯片代码.zip"提供了适用于个人电脑及手机设备的幻灯片实现方案，特别强调了对移动触摸和鼠标交互的支持，以及带有进度条的自动播放功能。下面将深入探讨这些关键知识点。 1. **跨平台...
bootstrap自适应电脑手机端后台登录界面代码.zip
09-26
本资源包含一个自适应电脑和手机端的后台登录界面代码，适用于那些希望快速创建美观且功能齐全登录页面的开发者。Bootstrap的核心特性就是其自适应网格系统，这使得设计的网页能自动适应不同屏幕尺寸，无论是桌面、...
支持电脑手机端的幻灯片轮播代码
06-09
在IT行业中，创建一个既能在电脑上又能在手机端流畅运行的幻灯片轮播代码是一项常见的需求。这种跨平台的交互设计能够提供一致的用户体验，无论用户是使用桌面电脑还是移动设备。以下是对"支持电脑手机端的幻灯片...
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
11-29
- 前后端分离部署，适应当前潮流。 - 接入第三方登录，减少注册成本。 - 留言采用弹幕墙，更加炫酷。 - 支持代码高亮和复制，图片预览，深色模式等功能，提升用户体验。 - 搜索文章支持高亮分词，响应速度快。 - ...
手机+pc端刮刮卡
01-20
本文将详细介绍如何在手机和PC端实现基于jQuery的刮刮卡效果。 一、jQuery基础 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在实现刮刮卡效果时，我们将依赖jQuery...
前端 背景图片
ball4022的博客
08-01 2202
背景图片 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片</title> <style> .box { width: 300px; he...
php图片自适应手机屏幕,织梦手机端图片自适应设置方法
weixin_36263738的博客
03-12 356
随着自适应网站使用量日趋上升，很多用户碰到这样的问题，内容里图片在PC端浏览器是正常的，但是用手机打开后会变形。今天我们就来一起解决下织梦手机站图片变形这个问题。手机端图片变形原因：由于织梦后台编辑器上传图片，会自动获取图片尺寸，产生代码为：，我们可以看到图片被限制了尺寸，那么我们在小于这个尺寸视窗下浏览时，就会变形。织梦手机端图片自适应解决办法：找到PHP系统文件：include/ arc.ar...
CSS实现背景图片全屏铺满自适应的方式（3种）
热门推荐
蓝胖子的博客
11-07 2万+
CSS实现背景图片全屏铺满自适应的方式（3种）
html根据PC手机设置不同背景图,Html-根据不同的分辨率设置不同的背景图片
weixin_39966602的博客
06-23 886
@mediaonlyscreenand(min-width:1024px) //当分辨率width>=1024px时使用1.jpg作为背景图片{.bg{background:url(./images/1.jpg)no-repeat;}}@mediaonlyscreenand(min-width:400px)and(max-width:1024px)...
图片自适应手机屏幕大小
freedom
02-27 1万+
后台编辑公告中包含图片在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入img { height: auto; width: auto\9; width:100%; }width:auto;是宽度自动的意思。\9是hack css 的一种写法，这种在正常css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器...
CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）
liona_koukou的博客
06-24 3064
场景：头部导航是比较复杂的背景图片，有时还需要和menu菜单位置贴合，同时需要自适应不同分辨率，实现结果如下： 1920 1366 2048 原始背景图片如下： 代码如下： .hearder-panel { position: absolute; top: 0; right: 0; left: 0; height: 70px; line-height: 50px; b
CSS - 移动端容器背景大图片自动适应屏幕
王佳斌
03-11 2980
前言 有时候，我们希望容器背景大图片自动适用容器宽高，均匀平铺在页面，几行 CSS 代码即可搞定。 实现 给父容器设置即可。 .view{ background-image: url(x.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } ...
电脑手机css自适应,怎么把一个pc页面自适应手机屏幕
weixin_29353431的博客
08-03 4498
无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。首先，在网页代码的头部，加入一行viewport标签meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no /viewport是网页默认的宽度和高度，上面这行代...
CSS实现网页背景图片自适应全屏
06-02
可以使用CSS的background-size属性来实现网页背景图片自适应全屏。 具体实现方法如下： 1. 在CSS中设置背景图片 ```css body { background-image: url(图片地址); } ``` 2. 设置背景图片的大小为cover ```css body { background-image: url(图片地址); background-size: cover; } ``` 3. 设置背景图片的位置为居中 ```css body { background-image: url(图片地址); background-size: cover; background-position: center; } ``` 这样就可以实现网页背景图片自适应全屏了。如果需要更多的样式调整，可以参考background属性的相关设置。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值