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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- 《Flutter 动画系列》组合动画
老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...
- Unity引擎入门——制作第一个2D游戏(1)
Unity作为当今最流行的游戏引擎之一,受到各大厂商的喜爱. 像是炉石传说,以及最近的逃离塔克夫,都是由unity引擎开发制作. 作为初学者的我们,虽然无法直接做出完成度那么高的作品,但每一个伟大的目 ...
- 关于C#三层架构增删改查中的“删除”问题
序: 刚学习C#,经过一段时间学习,现在正在做一个简单的前后台联通的项目(主要是C#三层架构实现增删改查).分享一点儿小经验,也供自己以后可以回头看看自己的码农之路. 内容: 主要分享的是一条删除会用 ...
- 《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环面(TorusGeometry)
3.1 基本几何形状 圆环面(TorusGeometry) 构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments ...
- 《Three.js 入门指南》3.1.1 - 基本几何形状 - 平面(PlaneGeometry)
3.1 基本几何形状 平面(PlaneGeometry) 说明: 这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面. 构造函数: THREE.PlaneGeom ...
- vagrant 入门案例 - 快速创建 Centos7
中文文档:http://tangbaoping.github.io/vagrant_doc_zh/v2/ 参考: https://blog.csdn.net/yjk13703623757/articl ...
- eolinker测试增强
地址:https://www.eolinker.com Chrome: https://chrome.google.com/webstore/detail/eolinker/mdbgchaihbacj ...
- MYSQL索引类型。MYSQLc储存引擎
MYSQL索引类型,MYSQLc储存引擎 MySQL索引创建与删除 MySQL存储引擎的 ...
- 在Android Studio中导入jar包
#1 下载jar包文件, #2 拷贝到libs目录下 #3 打开你的build.gradle,在dependencies加入如下代码 dependencies {compile files('libs ...
- C++ namespace 命名空间
namespace即"命名空间",也称"名称空间" 那么这个 "名称空间" 是干啥的呢? 我们都知道,C/C++中的作用域可以由一个符号 { ...