今天需要做一个占满设备宽度的轮播图,这里作为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结合使图片居中填满容器.

css的背景background的相关属性的更多相关文章

  1. CSS基础 背景图片的相关属性

    属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...

  2. css之背景(background)家族

    背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 ...

  3. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  4. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  5. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  6. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  7. CSS 背景background实例

    css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...

  8. web前端学习(三)css学习笔记部分(7)-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  9. CSS奇思妙想 -- 使用 background 创造各种美妙的背景

    本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术 将介绍一些利用 CSS 中的 background.mi ...

随机推荐

  1. charles抓包,打断点,连接手机抓包

    写给我自己: 如果是使用charles抓包.一定要tm的保证手机和电脑连的是一个网. charles抓本地包的操作 1.打开charles, 2.打开浏览器访问某网页,就可抓到对应的包 charles ...

  2. twemproxy发送流程探索——剖析twemproxy代码正编

    本文想要完成对twemproxy发送流程--msg_send的探索,对于twemproxy发送流程的数据结构已经在<twemproxy接收流程探索--剖析twemproxy代码正编>介绍过 ...

  3. (转)CSS颜色及<a>标签超链接颜色改变

    CSS颜色大全 <a>标签超链接颜色改变 A:hover   {BACKGROUND-COLOR:   #ffccff;   COLOR:   #0080ff}     (hover表示鼠 ...

  4. ZooKeeper数据结构

    Time in ZooKeeper ZooKeeper跟踪时间的多种方式 1)Zxid:每个ZooKeeper状态变化将会接收到一个zxid(ZooKeeper Transaction Id)的时间戳 ...

  5. [转] DDD领域驱动设计(三) 之 理论知识收集汇总

    最近一直在学习领域驱动设计(DDD)的理论知识,从网上搜集了一些个人认为比较有价值的东西,贴出来和大家分享一下: 我一直觉得不要盲目相信权威,比如不能一谈起领域驱动设计,就一定认为国外的那个Eric ...

  6. 配置lnmp

    ===================准备篇: 1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state –state NEW ...

  7. python 标准库 -- signal

    signal 的核心是 : 设置信号处理函数. 预定义信号 signal.SIG_DFL signal.SIGBUS signal.SIGFPE signal.SIGIO signal.SIGPOLL ...

  8. 深入浅出 spring-data-elasticsearch - 基本案例详解(三

    『  风云说:能分享自己职位的知识的领导是个好领导. 』运行环境:JDK 7 或 8,Maven 3.0+技术栈:SpringBoot 1.5+, Spring Data Elasticsearch ...

  9. R语言统计分析技术研究——卡方检验的思想和实现

    卡方检验的思想和实现 作者:李雪丽 材料摘自:百度

  10. MongoDB--GridFS 文件存储系统

    GridFS是Mongo的一种专门用存储小型文件的功能. 使用于下列场景: 1.写入文件:mongofiles put 文件路径 注意,当前mongo实例链接的哪个库,将写文件在哪个实例里面的grid ...