background-image的用法

background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）

1、background-image的用法，为图像制定url：

2、background-repeat：有方向的额重复

主要有几个属性：repeat，默认。背景图像将在垂直方向和水平方向重复；repeat-x；repeat-y；no-repeat；

3、background-position背景定位

有三种方法：百分数（50%、50%代表中心位置）、像素值（10px、20px代表左上角向下10px，向右20px）、和直接指定位置（center、top、bottom、left、right）

上面三种属性共同使用的代码：

在上面的三个属性配合使用后，产生新的需求，能不能将图片拉伸、放大或者缩小来满足背景页面需要呢？查到有background-size方法，该方法css3才具有

4、background-size有两个值，背景图的width和height，可以用像素（px）、百分比（%）或是auto，还可以是cover和contain。

cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同

contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含。

用像素：background-size:150px 80px;

百分比：background-size:40% 60%;不过需要注意的是，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。

background-image的用法相关推荐

CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
表格背景(Background)图像CSS用法详解
序号中文说明标记语法 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(http://www.blog.com.cn/URL ) ...
css中background: lighten的用法
话不多说看例子: <template><div class="btn" @click="btn">点击弹出消息提示框</div&g ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS3各个模块详解
一, CSS3 盒子阴影属性 box- shadow 也是 CSS3 新增的一个重要属性, 用来定义元素的盒子阴影. inset: 阴影类型, 可选值. 如果不设置, 其 ...
Web前端之jQuery 一
Web前端之jQuery 一 jQuery介绍和核心为什么要使用以及如何使用jQuery jQuery的入口函数 jQuery对象和js对象的转换 jQuery的选择器 jQuery的基本选择器层 ...
【新星计划】Demo---Expanding Cards------ 1/50(详解)
一.布局思路二.对CSS代码的初步解析三.对CSS的解析的更进一步解 2) CSS属性书写顺序以及里面包含的知识点 3) Overflow 和 text-overflow 的区别? ...

background-image的用法

background-image的用法相关推荐

最新文章

热门文章