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. 高性能 Jsonpath 框架,Snack3 3.2.54 发布(支持 kotlin data 类反序化)

    Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...

  2. Ubuntu 安装 MySQL 5.7

    一.安装MySQL 1. 删除Mysql 数据库 sudo apt autoremove --purge mysql-server-* sudo apt remove mysql-server sud ...

  3. Win10家庭/企业/教育版均可升级到专业版

    升级前,先备份现有KEY: cmd中输入 regedit 打开注册表,根据下面路径找到 BackupProductKeyDefault 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\ ...

  4. redis之列表 redis之hash redis其他操作 redis管道 django中使用redis celery介绍和安装 celery快速使用 celery包结构

    目录 昨日回顾 今日内容 1 redis之列表 2 redis之hash 3 redis其他操作 4 redis 管道 5 django中使用redis 6 celery介绍和安装 7 celery快 ...

  5. MongoDB 和 MySQL 之间有何区别?

    MongoDB 和 MySQL 是两个可用于存储和管理数据的数据库管理系统.MySQL 是一个关系数据库系统,以结构化表格格式存储数据.相比之下,MongoDB 以更灵活的格式将数据存储为 JSON ...

  6. 【每日一题】39. Contest(树状数组 / 容斥分治)

    补题链接:Here 算法涉及:树状数组.CDQ分治 n支队伍一共参加了三场比赛. 一支队伍x认为自己比另一支队伍y强当且仅当x在至少一场比赛中比y的排名高. 求有多少组(x,y),使得x自己觉得比y强 ...

  7. L3-008 喊山 (30 分) (BFS)

    喊山,是人双手围在嘴边成喇叭状,对着远方高山发出"喂-喂喂-喂喂喂--"的呼唤.呼唤声通过空气的传递,回荡于深谷之间,传送到人们耳中,发出约定俗成的"讯号",达 ...

  8. BFS 广搜

    HDU 2612 #include<stdio.h> #include<string.h> #include<iostream> #include<queue ...

  9. Cortex M3 CORE

    Cortex CM3 内核架构 CM3内核主要包含几个部分:取指(Fetch)\指令译码(Decoder/DEC)\执行(EXEC)\ALU 内存取数通过load & store指令,就是通过 ...

  10. [转帖]TLS1.3 正式版发布 — 特性与开启方式科普

    https://cloud.tencent.com/developer/article/1376033 互联网工程指导委员会(IETF)释出了传输层安全性协议的最新版本 TLS 1.3.TLS 被广泛 ...