css与背景相关的属性有哪些,css的背景background的相关属性

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

     (图一)                           

  (图二)

这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px);

1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际的高度就有可能跟我们的容器高度不一样,如图一,很明显高度就小于实际的效果图

如果我们设定了图片的宽100%,同时又设定图片的高是容器的100%,同样道理,要不然图片就会被拉长,也就是变形了,这样是非常不好的用户体验

除非图片是跟容器成比例设计的,不然使用img标签是没法达到图二效果,可以看一下宽100%,高设置为容器设计的8.5rem的效果:

 (图三),很明显我们可以看到图片被拉高了......

2. 除了使用img标签,还有另一种方法,就是使用背景图的方式.这里先展示一下使用背景图实现的图片及代码:

(图四)

我们可以看到主要用到了background相关的属性来实现了效果图,可因为图片与容器不成比例,所以这里就会舍弃了图片两边的部分.

-------------------------------------------------这里是代码分割线 Begin ----------------------------------------------

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;

}

html代码:

  

BANNER单页

-----------------------------------------------------------------这里是代码分割线 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)家族

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

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

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

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

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

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

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

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

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

CSS 背景background实例

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

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

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

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

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

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

随机推荐

mybatis调用视图和存储过程

现在的项目是以Mybatis作为O/R映射框架,确实好用,也非常方便项目的开发.MyBatis支持普通sql的查询.视图的查询.存储过程调用,是一种非常优秀的持久层框架.它可利用简单的XML或注解用语 ...

iOS开发零基础--Swift篇 循环

循环的介绍 在开发中经常会需要循环 常见的循环有:for/while/do while. 这里我们只介绍for/while,因为for/while最常见 for循环的写法 最常规写法 // 传统写法 ...

useradd命令老是忘记的参数

useradd有些参数老是忘记,是用的少还是不熟练呢?记录下吧 [root@svn ~]# useradd --help 用法:useradd [选项] 登录 useradd -D useradd - ...

ACM 关于数据输入加速

转载请注明出处:http://blog.csdn.net/a1dark 分析:我们都知道运行时间对我们来说很重要.有时候不惜用大量的内存去换取一点时间.有些人可能都比较关注这个问题.首先时间上:cin ...

A Byte of Python 笔记(6)模块

第8章 模块 用户在程序中定义一次函数而重用代码,如果用户想在其他程序中重用很多函数,可以通过使用模块的方式. 模块就是一个包含了所有用户定义的函数和变量的文件.为了在其他程序中重用模块,模块的文件名 ...

基于MVC和Bootstrap的权限框架解决方案 一．搭建HTML

因为某些原因,因为需要,最新要做一套客户管理系统,但是不满足于仅有的框架. 看了很多大牛写的框架,强大是强大,代码也太TM多了,乱七八糟话不多说,开始吧 随便在网上找到一套好看的HTML,看起来还不错 ...

每次打开VS都报错：我们无法自动填充你的 Visual Studio Team Services 帐户

我们无法自动填充你的 Visual Studio Team Services 帐户.遇到下面的错误: TF400813: Resource not available for anonymous ac ...

vue项目在IE9下报错 “requestAnimationFrame”未定义

在main.js里面添加: (function () { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var ...

Android基础(五) Service全解析----看不见的Activity

一.服务的介绍: 作为Android四大组件之中的一个,Service(服务)也常常运用于我们的日常使用中,它与Activity的差别在于:Service一直在后台执行.没实用户界面.所以绝不会到前台 ...