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. 火山引擎 DataTester 智能发布平台:智能化 A/B 实验,助力产品快速迭代

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在互联网竞争炙热的红海时代,精益开发高效迭代越来越成为成为产品竞争的利器.产品迭代过程中,如何保障高效的功能迭代安 ...

  2. python argparse传入布尔参数不生效解决

    前言 在一个需要用到flag作为信号控制代码中一些代码片段是否运行的,比如"--flag True"或者"--flag False". 但是古怪的是无法传入Fa ...

  3. 【django drf】 阶段练习

    目录 需求 settings.py views.py urls.py serializers.py permissions.py page.py authenticate.py model.py 权限 ...

  4. 用户 IP,里面藏了多少秘密?

    大家都知道,要邮寄一封信给正确的收件人,需要提供准确而精细的地址,这个地址需要从国家和城市精确到邮政编码,街道和门牌号码.只有这样,邮局的工作人员才能知道将信送到那里. Internet 上也是如此, ...

  5. KVM--基本管理

    #!/bin/bash iso=/iso/CentOS-7-x86_64-Minimal-1708.iso #本机镜像文件位置 centos=centos7.0 #操作系统版本 disk_path=/ ...

  6. 【JAVA基础】日志管理

    LOGGER.debug("Request uri: {}, headers: {}", signedRequest.getURI(), signedRequest.getAllH ...

  7. .NET 6 整合 Autofac 依赖注入容器

    前言 一行业务代码还没写,框架代码一大堆,不利于学习. 常看到java的学习资料或博客,标题一般为<SpringBoot 整合 XXX>,所以仿照着写了<.NET 6 整合 Auto ...

  8. 一个非常轻量级的 Web API Demo

    一个非常轻量级的 Web API Demo,代码量很少,实现了方法拦截器,token校验,异常拦截器,缓存 创建项目:如果选择Web API,项目中东西会比较多,这里选择Empty,把下面的Web A ...

  9. 如何在Windows中使用Telnet客户端

    Telnet协议的解释 Telnet( TE终端NET工作的缩写)是一种网络协议,用于提供与设备通信的命令行界面 . Telnet最常用于远程管理,但有时也用于某些设备的初始设置,尤其是交换机 ,接入 ...

  10. POJ 1742 Coins(多重背包的可行性问题)

    Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar. ...