body {
position: relative;
background-color: #eee;
background-image: url(链接);
background-size: 100%;
max-width: 580px;
margin: 0 auto;
}

直接在源代码中插入如下

style="background-repeat:no-repeat; background-attachment:fixed;background-size:cover;background-image: url(链接);">

放在<style>标签即可

<style>
body {
position:relative;
background-color: #eee;
background-image: url(链接);
background-size: 100%;
max-width: 580px;
margin: 0 auto;
}
</style>

css自适应各种格式背景图的更多相关文章

  1. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  2. css中用一张背景图做页面的技术有什么优势?

    css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...

  3. 清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  4. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  5. css设置全屏背景图,background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  6. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

  7. CSS揭秘—灵活的背景图(三)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

  8. 通过css使用background-color为背景图添加遮罩效果

    一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

  9. vue css采用别名引入背景图

    在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...

  10. css实习滤镜效果(背景图模糊)

    模糊实例 图片使用高斯模糊效果: img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } c ...

随机推荐

  1. DataLeap的全链路智能监控报警实践(三): 系统实现

    系统实现 整体架构 基线管理模块:负责基线创建.更新.删除等操作,管理基线元信息,包括保障任务,承诺时间,余量及报警配置等): 基线实例生成:系统每天定时触发生成基线实例,生成实例的同时根据保障任务, ...

  2. 转换 nvarchar 值 '81000000825' 时溢出了整数列

    转换 nvarchar 值 '81000000825' 时溢出了整数列

  3. Python日常学习

    学习算法和数据结构之余开始接触python,目前正在学习语法部分,这篇blog记录下一些知识点和放一些文档 or 教程的传送门. 文档网站 Python 解释器内置函数 Python速成 from O ...

  4. 浏览器,navicat,IDEA--快捷键

    mysql快捷键:ctrl+r 运行查询窗口的sql语句ctrl+shift+r 只运行选中的sql语句ctrl+q 打开一个新的查询窗口ctrl+w 关闭一个查询窗口ctrl+/ 注释sql语句 c ...

  5. 08.25北京站|阿里云Serverless 技术实践营( AI 专场)开放报名

    活动简介 阿里云 Serverless 技术实践营(AI 专场)是一场以聚焦企业级 AIGC 应用开发与落地展开的主题活动,活动受众以关注 Serverless 和 AI 技术的开发者.企业决策人.云 ...

  6. 三、swift大对象--动态大对象

    系列导航 一.swift对象存储环境搭建 二.swift添加存储策略 三.swift大对象--动态大对象 四.swift大对象--静态态大对象 五.java操作swift对象存储(官网样例) 六.ja ...

  7. java进阶(27)--HashSet与TreeSet

    一.HashSet: 1.特点:无序不可重复,实际上为放入HashMap中的key部分. 2.举例说明:

  8. Zookeeper 的 ZAB 协议 以及 zookeeper 与 nacos 注册中心比对

    本文为博主原创,未经允许不得转载: 目录: 1. ZAB 协议 2. zookeer 节点状态 3. zookeeper 注册中心与 nacos 注册中心比较 4. zookeeper 配置注册中心 ...

  9. 基于python+django的外卖点餐网站-外卖点餐系统

    该系统是基于python+django开发的外卖点餐系统.适用场景:大学生.课程作业.毕业设计.学习过程中,如遇问题可以在github给作者留言. 演示地址 前台地址: http://food.git ...

  10. [转帖]K8s Pod Command 与容器镜像 Cmd 启动优先级详解

    https://cloud.tencent.com/developer/article/1638844 前言 创建 Pod 时,可以为其下的容器设置启动时要执行的命令及其参数.如果要设置命令,就填写在 ...