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. HanLP 学习

    学习 HanLP 需要了解, 双数组Trie树 (Double-array Trie) Aho-Corasick DoubleArrayTire 算法 ACDAT - 基于双数组字典树的AC自动机 T ...

  2. Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件

    Chrome 地址栏里输入: chrome://extensions/ 打开插件商城:

  3. 基于分发与计算的GRTN全球实时传输网络

    一张能同时满足「分发」与「计算」需求的网. 从直播趋势看「分发」与「计算」 阿里云直播产品架构图中,主要分为端和云两个部分:在端侧,主要包含推流端和播放端:在云侧,一是基于分布式节点构建的传输网,二是 ...

  4. 记一次github上传文件夹(项目)的历程和踩坑

    1.git官网登录自己的git账号(没有就自己注册一个):https://github.com/  2.首先是下载安装好git软件:https://gitforwindows.org/ (1)这里要注 ...

  5. vue学习笔记 十七、父子组件 ---> 子组件传值

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  6. 【调试】kprobes(一)基本概念

    简介 开发人员在内核或者模块的调试过程中,往往会需要要知道其中的一些函数有无被调用.何时被调用.执行是否正确以及函数的入参和返回值是什么等等. 比较简单的做法是在内核代码对应的函数中添加日志打印信息, ...

  7. 机器学习笔记(二)使用paddlepaddle,再探波士顿房价预测

    目标 用paddlepaddle来重写之前那个手写的梯度下降方案,简化内容 流程 实际上就做了几个事: 数据准备:将一个批次的数据先转换成nparray格式,再转换成Tensor格式 前向计算:将一个 ...

  8. Linux 常见重要系统文件

    Linux 常见重要系统文件 目录 Linux 常见重要系统文件 网卡配置文件 文件内容举例: DNS配置文件 文件内容举例: 系统hosts文件 文件内容举例: fstab文件 文件内容举例: rc ...

  9. python3之lambda表达式

    技术背景 lambda表达式本身是一个非常基础的python函数语法,其基本功能跟使用def所定义的python函数是一样的,只是lambda表达式基本在一行以内就完整的表达了整个函数的运算逻辑.这里 ...

  10. MySQL本地服务器与MySQL57网络服务器区别

    MySQL服务器与MySQL57服务器区别与不同处在哪里,他们各自的领域范围,能不能同时启动服务? 安装了MySQL-5.7.18.0版本数据库,版本中包含了MySQL Workbench可视化试图工 ...