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 ...
随机推荐
- CIO们开始将软件供应链升级为安全优先级top
开源之所以在软件开发中大量使用的原因是它提供了经过良好测试的构建块,可以加速复杂应用程序和服务的创建.但是第三方软件组件以及包和容器的便利性同时也带来了风险--软件供应链攻击. 软件供应链攻击日益普遍 ...
- 网页“悼念模式”全站变灰/黑白色CSS代码
<style> html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(1 ...
- Netty 框架学习 —— 初识 Netty
Netty 是一款异步的事件驱动的网络应用程序框架,支持快速地开发可维护的高性能的面向协议的服务器和客户端 Java 网络编程 早期的 Java API 只支持由本地系统套接字库提供的所谓的阻塞函数, ...
- C#开源免费的Blazor图表库
前言 今天分享一款基于ApexCharts.js封装的.C#开源免费的Blazor图表库:Blazor-ApexCharts. 10款值得推荐的Blazor UI组件库 全面的ASP.NET Core ...
- 路径规划之 A* 算法
算法介绍 A*(念做:A Star)算法是一种很常用的路径查找和图形遍历算法.它有较好的性能和准确度.本文在讲解算法的同时也会提供Python语言的代码实现,并会借助matplotlib库动态的展示算 ...
- 2023 中国 Serverless 用户调查,邀您填写!
当前云计算已成为数字时代的基础设施,支撑众多企业进行数字化转型升级.随着企业上云的范围更加广泛,国内云计算正在迈向云原生时代.Serverless技术因其以应用为中心.屏蔽底层复杂逻辑,灵活扩展,按需 ...
- 3 分钟创建 Serverless Job 定时获取新闻热搜
不用掏手机,不用登微博,借助 SAE 定时任务就可以实现每小时获取实时新闻热搜!SAE 场景体验火热开启中,参与还可领好礼! Job 作为一种运完即停的负载类型,在企业级开发中承载着丰富的使用场景.S ...
- <vue 路由 6、动态路由-方法传递参数>
一.query效果 点击query按钮 二.param效果 点击param按钮 注意点 1:重新刷新浏览器后,参数都不在了. 2:url中能看不到传递的参数 3.分别用{{$route. params ...
- freeswitch号码变化方案
概述 freeswitch是一款简单易用的开源音视频软交换平台. 在生产环境中,由于各个线路的号码规则并不统一,经常需要针对中继线路做号码变换的方案. 本文主要介绍fs中有哪些可选的号码变换方案. 环 ...
- java进阶(18)--Enum枚举
一.枚举基本概念 1.引用数据类型 2.每一个值可看作一个常量 3.方法返回结果>2时建议使用枚举,=2建议使用boolean 二.举例说明 1.程序1,方法返回为数字