今天需要做一个占满设备宽度的轮播图,这里作为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. webuploader插件,我踩得坑

    我在目前的公司做的项目要么是原生写法去做项目,要么就是vue+webpack做项目,但是vue这部分只是用了模板template,vue其他的都没用. 有一个项目需要做上传图片的功能,老大扔给我一个插 ...

  2. .NET 随记

    1. goto 常用于 switch语句中2. 字符串相加用 StringBuilder的Append()方法性能好3. str.Trim(',') 清除字符串后的","4. st ...

  3. java知识点整理

    1 java 和Tomcat总结 脑图地址  (其中web 容器部分还需要继续完善,但是没找到相关文档) 跟着java Se 文档梳理了一下学习路线图(方便全面掌握要点,及时对自己查漏补缺),以及一些 ...

  4. .NET 开发环境搭建

    概述 在接下来的时间里,将会入手ASP.NET MVC这一专题,尽量用最快的时间,最有效的方法,分别从深度和广度上剖析这一专题,力求讲明白.讲透.以此来与大家分享,力求达到共同学习,共同交流,共同进步 ...

  5. c/c++面试准备笔记1

    在c++程序中调用被C编译器编译后的函数,为什么要加extern  "C"? C++语言支持函数重载,C语言不支持函数重载.函数被C++编译后在库中的名字与C语言的不同.C++提供 ...

  6. ⑨的完美冻青蛙(frog)

    ⑨的完美冻青蛙(frog) 时间限制: 1 Sec  内存限制: 128 MB 题目描述 输入 第一行是一个正整数n,表示上式中的p的个数.   接下来有n行,每一行两个正整数pi 和ei . 输出 ...

  7. linux 权限字母含义

    查看某一文件夹下所有文件夹的权限情况:ls -l分别是:所有者(user)-所有者(user)-其他人(other)r 表示文件可以被读(read)w 表示文件可以被写(write)x 表示文件可以被 ...

  8. 使用react-router setRouteLeaveHook的钩子函数

    今天在使用react-router setRouteLeaveHook的钩子函数,不知道怎么实验就是成功.最后功夫不负有心人,终于让我找到使用setRouteLeaveHook的方法了 1.我在网络上 ...

  9. css里面position:relative与position:absolute的区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  10. java执行程序的内存分析系列专栏二之static变量和方法内存分析

    昨天写了简单的聊了下java执行程序时简单的内存划分,今天我们接着往下聊,聊聊static变量和方法的内存分析. 1.static变量和方法的第一个特性内存分析 statiic变量和方法的第一个特性能 ...