全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:
(图一)
(图二)
这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px);
1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际的高度就有可能跟我们的容器高度不一样,如图一,很明显高度就小于实际的效果图
如果我们设定了图片的宽100%,同时又设定图片的高是容器的100%,同样道理,要不然图片就会被拉长,也就是变形了,这样是非常不好的用户体验
除非图片是跟容器成比例设计的,不然使用img标签是没法达到图二效果,可以看一下宽100%,高设置为容器设计的8.5rem的效果:
(图三),很明显我们可以看到图片被拉高了......
2. 除了使用img标签,还有另一种方法,就是使用背景图的方式.这里先展示一下使用背景图实现的图片及代码:
(图四)
我们可以看到主要用到了background相关的属性来实现了效果图,可因为图片与容器不成比例,所以这里就会舍弃了图片两边的部分.
-------------------------------------------------这里是代码分割线 Begin ----------------------------------------------
<style>
body {
margin:0 ; /*这里只做简单的初始化*/
}
.xh-lxx-one-img {
display: block;
width: 100%;
height: 8.5rem;
line-height: 8.5rem;
color: #333333;
text-align: center;
background: url(img/59662e5bNa454c17d.jpg) no-repeat;
background-color: #DDDDDD;
background-size: cover;
background-position: center;
}
</style>
html代码:
<a class="xh-lxx-one-img"> <!--这里用a标签作为图片的容器,是因为考虑到真正运用到项目中会有链接跳转-->
<span>BANNER单页</span>
</a>
-----------------------------------------------------------------这里是代码分割线 End ---------------------------------------------------------------
background的定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color 设置背景颜色
- background-position 规定背景图片的位置
- background-size 规定背景图片的尺寸
- background-repeat 规定如何重复背景图片
- background-origin 规定背景图片的定位区域
- background-clip 规定背景图片的绘制区域
- background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
- background-image 规定要使用的背景图片
这里主要对图片定位background-position及尺寸background-size做总结:
background-position:
这个属性设置背景原图像(由background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
可能的值:
- top left (默认值), top center , top right, center left , center center , center right , bottom left , bottom center , bottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。
x% y% 第一个值是水平位置,第二个值是垂直位置。默认值:0% 0%。
- xpos ypos 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
就拿本次demo来讲,这里用到了background-size:cover,所以填满了整个容器,在垂直方向是居中的,这里只要对水平方向做改变:
默认值(top left),缺省了图片右边的内容 center(居中),缺省了两边的部分内容 right(右边对齐),缺省了左边的部分内容
background-size:
可能的值:
length |
设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover |
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
前两个值都是需要手动输入具体的数值来规定背景图的大小,很容易理解
这里讲一下cover和contain两个值的不同效果,来看一下效果图(其他样式一样,仅改变该属性值):
cover(图片的某些部分不显示完整) contain(图片完整显示,内容区域部分留白)
所以两者的区别是:
cover: 背景图完全覆盖背景区域,图片的某些部分可能不显示完整 (简单来讲就是根据最短边来最大的适应背景区域)
contain: 在内容区域保留图片的全部内容,内容区域可能不填满 (简单来讲就是根据最长边来最大的适应背景区域)
总结: 如果不能保证图片的宽高与所设计的容器成比例,那么就可以使用background-position:center和background-size:cover结合使图片居中填满容器.
全屏背景图的实现及background的相关属性的更多相关文章
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...
- css设置全屏背景图,background-size 属性
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
- unity中全屏背景图缩放
using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- Android开发中的全屏背景显示方案
引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- HTML5全屏背景视频与 CSS 和 JS(插件或库)
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
随机推荐
- hive 报错 java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient
Exception in thread "main" java.lang.RuntimeException: java.lang.RuntimeException: Unable ...
- MySQL之练习题5
.将所有的课程的名称以及对应的任课老师姓名打印出来,如下: SELECT cname,tname FROM course INNER JOIN teacher WHERE course.teacher ...
- hdu-1171(多重背包+二进制优化)
题目链接: 思路:找每次最多装一半的情况,注意数组范围,前几次dp开小了,一直RE. #include<iostream> #include<cstdio> #include& ...
- UVa 1572 Self-Assembly (构造+拓扑排序。。。。。)
题意:给定n个带标号的正方形,标号要么是一个大写字母加一个+或-,要么是00, 当且仅当大写字母相同并且符号相反时可以连接,问你给定的能不能拼成一个无限大的的东西. 析:说实话,真心没有看出来是拓扑排 ...
- HDU 2095 find your present (2) (异或)
题意:给定n个数,让你找出那一个次数为1的. 析:由于题意说了,只有那一个数是奇数,所以其他的都是偶数,根据异或的性质,两个相同的数异或为0: 任何数和0异或得原数,可以很简单的做出这个题. 代码如下 ...
- python 文件合并和编号
# -*- coding:utf-8 -*- import os import re p1=r"([0-9][0-9][AB])\.\w{3}$" pattern1=re.comp ...
- Xcode svn import项目 上传.a文件(静态库)
在终端使用命令 touch 项目所在文件夹 svn import 项目文件夹 https://服务器地址 -m "iPad import" 这样就把项目上传到服务器上了!但是不能把 ...
- 获取iOS 设备上崩溃日志 (Crash Log)的方法
1. iTunes同步获取 大部分用户会使用iTunes软件来管理iPhone,这样同步的Crash日志就会同步到电脑上,我们需要在特定的路径里面查找 Mac OS X:~/Library/Logs/ ...
- 关于React的入门级安装和最浅显解释
春节临近,办公室里半片空位,半片浮嚣. 想到将放假,屏幕上的代码也都变成了雀跃的小虫. 无法专心了. 终于还是强迫自己读了半篇文档,写了几坨程序. 这次记录的是关于React,最浅显的内容. ———— ...
- google-glog功能介绍
google-glog功能介绍 分类: 其它类型2011-08-19 10:06 6618人阅读 评论(0) 收藏 举报 cookiesgooglestreammodulemapreducenull ...