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. 火山引擎 ByteHouse 与白鲸开源完成兼容性认证,加速数据价值释放

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 数据作为新型生产要素,已快速融入生产.分配.流通.消费和社会服务管理等各环节,深刻改变着生产方式.生活方式和治理方 ...

  2. ByteHouse+Apache Airflow:高效简化数据管理流程

    Apache Airflow 与 ByteHouse 相结合,为管理和执行数据流程提供了强大而高效的解决方案.本文突出了使用 Apache Airflow 与 ByteHouse 的主要优势和特点,展 ...

  3. 一文读懂火山引擎A/B测试的实验类型(2)——可视化实验

    一. 概述 可视化实验,通过所见即所得的在线编辑(比如对页面中的图片.文字.颜色.位置等元素和属性进行编辑),降低在Web/H5页面优化的场景下,产品方和运营方使用A/B实验工具的成本,免除编码. 前 ...

  4. 火山引擎 DataTester 推出可视化数据集成方案

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着数字化的长期演进,企业中往往存在多个运行在不同平台的数字系统,这些数据源彼此独立,数据跨系统间的交流.共享和融 ...

  5. sqlite3.OperationalError: no such function: JSON_VALID

    Initializing database.. Traceback (most recent call last): File "d:\program files\python38\lib\ ...

  6. 国内使用 Mac OS 快速安装 Homebrew

    问题描述 使用新的 Mac 电脑开发,没有安装 Homebrew 确实不行,但是国内访问 github,很不稳定,运行 /bin/bash -c "$(curl -fsSL https:// ...

  7. 2019CCPC-江西省赛(重现赛)队伍题解

    2019CCPC江西省赛(重现赛) 第一次组队(和队内dalao:hzf)参加比赛,这次比赛使用的是我的笔电,但因为我来的比较晚,没有提前磨合:比如我的64键位键盘导致hzf突然上手不习惯. Solv ...

  8. java读取解析endnote文件

    有些项目中会要求代码解析endnote文献资料获取一些标准的信息,例如XX在某著名期刊上发表了某篇文章,关于发表文章的这个事情的描述就会给坐着一个endnote文件来记录文章名称.作者.期刊名称.出版 ...

  9. S3C2440移植uboot之新建单板_时钟_SDRAM_串口

    上一节S3C2440移植uboot之启动过程概述我们我们分析了uboot启动流程,这节将开始新建一块单板支持S3C2440. 目录 1.新建单板 1.1 将2410的单板文件夹拷贝成2440: 1.2 ...

  10. SpringBoot RabbitMQ 实战

    RabbitMQ RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台 ...