div背景图片自适应
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。
background-size有3个属性:
auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。
div背景图片自适应的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- 背景图片自适应整个页面CSS+DIV
<body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- div背景图片或颜色不显示的解决办法
背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)D ...
- js 定时更改div背景图片
今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
随机推荐
- IIS-URL重写模块配置参考
本文提供了URL重写模块的概述,并解释了该模块使用的配置概念. 功能概述URL重写模块将请求URL重写为显示给用户或Web应用程序的简单,用户友好和搜索引擎友好的地址.URL重写使用定义的规则进行评估 ...
- phpstorm问题
主题 PreferencesPreferencesPreferences 重要的事情说3边,而不是default setting Preferences->Appearance & Be ...
- LVS、Tomcat、Nginx、PHP优化项
一.LVS 性能调优的方法最佳实践1.最小化安装编译系统内核2.优化持久服务超时时间: 1)显示超时时间 #ipvsadm -Ln --timeout #Timeout (tcp t ...
- netty学习1
1.IO java 自带IO流 1)同步处理方式,一个请求占用一个线程,高并发常见出现问题 2.java nio 实在jdk1.4版本上新添加的new IO / 非阻塞IO 可多路并发 3.Netty ...
- centsos 7 删除自带jdk安装自定义jdk8
甲骨文官网地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如何清除自带j ...
- SSIS 从oracle 转数据回MS SQL
SSIS 从oracle 转数据回MS SQL,转每月的销售记录,大概15000以内,在开发机器上没问题,部署到生产环境出现各种状况“ SSIS 无法从连接伺服器的OLE DB提供者BULK 提取资料 ...
- leetCode练题——28. Implement strStr()
1.题目 28. Implement strStr()——Easy Implement strStr(). Return the index of the first occurrence of ne ...
- websocket 无法查看Data
websocket 是浏览器新的信息传输协议,记录一些遇到的问题: 调试相关: websocket 连接以后可以在Chrome tools 中的network下看到,如图 要查看通信内容可以选中点击f ...
- C:数值溢出问题
当超过一个数据类型能够存放最大的范围时,数值会溢出. 有符号位最高位溢出的区别:符号位溢出会导致数的正负发生改变,但最高位的溢出会导致最高位丢失. #include <stdio.h> i ...
- 基于soa的架构
SOA:Service Oriented Architecture面向服务的架构.也就是把工程拆分成服务层.表现层两个工程.服务层中包含业务逻辑,只需要对外提供服务即可.表现层只需要处理和页面的交互, ...