bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做:
<style type="text/css">
html{height: %;}
body.aa{height: auto;
background: url(login-background.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: rgba(, , , .)}
</style>
bootstrop中
css中编辑此样式:
.bg {
background:url(图片地址) no-repeat center;
background-size:contain;
}
然后在你的div里引用这个样式就行了:
<div class="row bg">
使图片不随滚动条滚动,即固定不动则加fixd:
.bg {
background:url(图片地址) no-repeat center fixed;
background-size:contain;
}
bootstrop设置背景图片自适应屏幕的更多相关文章
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
- css -- 背景图片自适应屏幕大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- css中设置背景图片适应屏幕
以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...
- background-size (设置背景图片的大小)
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshiton ...
- 微信小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- javax.el.PropertyNotFoundException: 类型[cn.cqsw.pojo.Course]上找不到属性[CourseId]
今天在JSP利用EL表达式取值报了 "javax.el.PropertyNotFoundException” 1 Caused by: org.apache.jasper.JasperExc ...
- 10年阿里自动化测试架构师帮您收集的:git常用命令大全以及git原理图【泣血推荐,建议收藏】
一.Git分布式版本控制简介 Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势.本来想着只把最有用.最常用的 Git 命令记下来, ...
- 安卓开发学习日记 DAY4——Button,ImageButton
Button与ImageButton基本类似 也有类似于TextView和ImageView的区别 这里需要注意的是: 在你定义text属性的内容时,最好是在Values文件下的String.xml中 ...
- Array(数组)对象-->sort() 方法
1.定义和用法 sort() 方法用于对数组的元素进行排序. 默认排序顺序为按字母升序. 语法: array.sort(sortfunction) 参数: sortfunction:规定排序顺序.必须 ...
- string 从下标0 一直截到倒数第三位
StringUtils.substring(String.valueOf(maxSequence), 0, -3)如上,关键就是那个-3,表示倒数第三位.
- iOS线程数量监控工具
简单却强大的线程监控工具 KKThreadMonitor :当线程过多或瞬间创建大量子线程(线程爆炸),控制台就打印出所有的线程堆栈.便于分析造成子线程过多或线程爆炸的原因. /******* 线程爆 ...
- AJ学IOS 之微博项目实战(7)程序启动新特性用UICollectionViewController实现
AJ分享,必须精品 一:效果 这里实现了大多数app都会有的软件新特性的功能,用的是UICollectionViewController实现的 二:思路 这里用了UICollectionViewCon ...
- webWMS开发过程记录(六)- 详细设计之系统管理
一.功能说明 1. 权限管理 (参考“权限管理-百度百科") 定义:一般指根据系统设置的安全规则或安全策略,用户可以访问而且只能访问自己被授权的资源,不多不少. 分类:从控制力度来看,通常分 ...
- 移动硬盘临时文件太多怎么办,python黑科技帮你解决
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 星安果 PS:如果想了解更多关于python的应用,可以私信我,或者 ...
- Cucumber(1) —— 环境配置
目录 学习资料 cucumber简介 cucumber环境配置 学习资料 1.cucumber官方学习网站 cucumber简介 1.cucumber是一种支持BBD(behavior-driven ...