文档章节

背景图片

Linklbj
 Linklbj
发布于 2016/11/06 21:25
字数 461
阅读 35
收藏 0

    很多时候,在移动Web页面中,我们都只需要在里面输入手机号码和验证码,但是页面的内容又不可以让用户觉得太单薄。所以一个好的背景图片就可以让内容丰富起来,但是怎么让背景图片在不同的移动终端下都有良好的伸展呢?哈哈哈,说的太多,再次哈哈哈。下面就是我的方法,仅记录并提供参考,如有需要改正,欢迎指正,欢迎吐槽。

Demo one : 很简单,可或者对于你来说,很实用。PC上的布局用这一套效果明显。

<!DOCTYPE HTML>
<html>
<head>
<title></title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <style type="text/css">
  .content {
    width:800px;
	height:800px;
    /* 最外层div */
    background-color:#f3f0d9; /* 这里的颜色设置最好设置相近的颜色 */
	margin:0px auto;
	}

  .content-one{
    /* 宽和高和最外层是一样的 */
    width:100%;
	height:100%;

	margin:0 auto;
	background: url("./coupon_mid_autumn_get_success.png") no-repeat fixed top;
  }
  </style>
</head>
<body>
  <div class="content">
	<div class="content-one"></div>
  </div>
</body>
</html>

Demo two  : 完全填充,不管怎么拉伸都是填充。注意:width-max是980。移动开发中背景图片充满整个屏幕挺管用的。

<!DOCTYPE HTML>
<html>
<head>
<title></title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <style type="text/css">
  .content {
    /* 外层div */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 980px;
    margin: 0 auto;
    /* 当内容超出盒子范围时,也会出现滚动条 */
    overflow: auto;
    /* 用来设置在IOS浏览器的容器内滚动是否开启惯性和回弹的 */
    -webkit-overflow-scrolling: touch;
    background-color: red;
	}

  .content-one{
    /* 宽和高和最外层是一样的 */
    width:100%;
	height:100%;
	background: url("./bg_mid_autumn.png") no-repeat left top;
	/* 背景图片适应手机屏幕大小 这里是重点*/
	max-width: 100%;
    background-size:cover;
    background-size:100% 100%;
  }
  </style>
</head>
<body>
  <div class="content">
	<div class="content-one"></div>
  </div>
</body>
</html>

还是那句,才疏学浅,如有建议或者意见,望留言指正。

(●'◡'●)

 

© 著作权归作者所有

Linklbj
粉丝 0
博文 4
码字总数 1550
作品 0
深圳
私信 提问
css中background背景属性概述(支持原创)

background:url(背景图片路径) no-repeat;/不重复默认在左上方/ background:url(背景图片路径) no-repeat center;/不重复背景图片中间显示/ background:url(背景图片路径) no-repeat bottom ...

金小川
2010/04/13
21
0
html5中关于背景的介绍

一:背景颜色 背景颜色一共有四种取值方式,分别为具体颜色值单词,rgb,rgba以及十六进制具体如下所示: 二:背景图片 如何设置背景图片呢?? CSS中有一个叫做background-image:url();的属...

随风流年
2017/07/27
0
0
jquery mobile设置背景图片与背景颜色_无需整理

想单个页面设置背景图片那就跟jquerymobile有关了 所有页面都一个背景那就 <style> body{background:url(xxx.jpg) 50% 0 no-repeat;background-size:cover} </style> 需要了解下面2个属性 关......

辣条拌鱼翅
2015/01/01
45
0
CSS 的 background 属性小结

background有8个属性控制,可以简写成一个 1.background-color background-color属性设置背景元素的 背景颜色,可以设置透明 给透明背景颜色家一个边框方便查看 2.background-image backgro...

追逐iOS
2018/08/03
0
0
CSS定位元素--背景

CSS 里也一样,每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color 属性),也可以包含任意多个背景...

风吹一米阳光
2015/09/22
79
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部