css自适应各种格式背景图
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自适应各种格式背景图的更多相关文章
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- css中用一张背景图做页面的技术有什么优势?
css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...
- 清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...
- 【Web前端】清除css、javascript及背景图在浏览器中的缓存
在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...
- css设置全屏背景图,background-size 属性
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
- 【CSS】div的背景图完整图片覆盖
最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...
- CSS揭秘—灵活的背景图(三)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- 通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
- vue css采用别名引入背景图
在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...
- css实习滤镜效果(背景图模糊)
模糊实例 图片使用高斯模糊效果: img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } c ...
随机推荐
- 最高提升10倍性能!揭秘火山引擎ByteHouse查询优化器实现方案
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 作为企业级数据库的核心组件之一,查询优化器的地位不可忽视.对于众多依赖数据分析的现代企业来说,一个强大且完善 ...
- 配置阿里云docker镜像加速
配置好后 重新加载一下 daemon [root@centos-linux jimmy]# systemctl daemon-reload [root@centos-linux jimmy]# sys ...
- #2054:A == B ?(水题坑人)
Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...
- Codeforces Round #664 题解(A ~ C)
1395A - Boboniu Likes to Color Balls 如果在r,b,g,w中小于或等于一个奇数,则可以将其定为回文. 否则,请进行一次操作(如果可以),然后检查上述情况. 进行多次 ...
- Codeforces Round #669 (Div. 2) A、B题题解
Problem A - Ahahahahahahahaha https://codeforces.com/contest/1407/problem/A 题意: 给定一个偶数数组(元素值 0,1),在删 ...
- Puppeteer 入门与实战
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/P-YdQPOQ9GZgjDEP7VG8ag作者:Wang Zhenzheng Puppetee ...
- mysql8.0环境搭建linux
本文主要介绍如何在linux环境(64位)下搭建mysql8.0的数据库环境 1.到指定目录下下载安装包 [root@minio3 ~]# cd /usr/local/src [root@minio3 ...
- freeswitch的mod_xml_curl模块
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 随着fs服务的增多,每一台fs都需要在后台单独配置,耗时耗力,心力憔悴. 如果有一个集中管理配置的配置中心,统一管理所有fs的配置, ...
- NET Core实战项目之CMS 设计篇 思维导图
NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程 .NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程 .NET Core实战项目之CMS 第九章 设计篇 ...
- 浅谈 Docker 网络:单节点单容器
1.Docker 网络模型 Docker 在 1.7 版本中将容器网络部分代码抽离出来作为 Docker 的网络库,叫 libnetwork.libnetwork 中使用 CNM(Container ...