背景大小比率css,背景大小：background-size - CSS3

在CSS2.1中，我们是不能使用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小决定。

在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。

语法：

background-size:取值;

说明：

background-size属性取值有两种：一种是长度值，如px、em、百分比等；另外一种是使用关键字，如下表所示。

background-size关键字取值

属性值

说明

cover

即“覆盖”，表示将背景图片等比缩放来填满整个元素

contain

即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止

这是一张大小为120px×80px的图片，这一节的例子都使用它作为背景图片。

举例：background-size取值为“长度值”

{

width:160px;

height:100px;

border:1px solid red;

margin-top:10px;

background-image:url(img/battle.png);

background-repeat:no-repeat;

}

#div2{background-size:160px 100px;}

浏览器预览效果如下图所示。

分析：

在这个例子中，第1个div元素背景图片大小使用默认值(即图片实际大小)，而第2个div元素使用background-size属性重新定义背景图片大小。

其中，background-size:160px 100px;表示定义背景图片的宽度为160px，高度为100px。

举例：background-size取值为“关键字”

{

width:160px;

height:100px;

border:1px solid red;

margin-top:10px;

background-image:url(img/battle.png);

background-repeat:no-repeat;

}

#div2{background-size:cover;}

#div3{background-size:contain;}

浏览器预览效果如下图所示。

分析：

在这个例子中，第1个div元素没有使用background-size属性，第2个div元素background-size属性取值为“cover”，第3个div元素background-size属性取值为“contain”。小伙伴们对比理解一下。

常见问题：

1．对于背景图片的大小，不是可以使用width和height这两个属性来定义吗？为什么还要增加一个background-size属性呢？

大家一定要搞清楚，背景图片跟普通图片(即img标签)是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。

背景大小比率css,背景大小：background-size - CSS3 | 绿叶学习网相关推荐

html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
什么是css css3,CSS3简介 - CSS3 | 绿叶学习网
对于刚刚接触CSS3的小伙伴,一开始肯定会有这么一个疑问:"CSS3跟CSS有什么区别呢?"实际上,CSS是从CSS1.CSS2.CSS2.1到CSS3这几个版本一路升级而来的. ...
css 平移到某个位置_平移：translate() - CSS3 | 绿叶学习网
在CSS3中,我们可以使用transform属性的translate()方法来实现元素的平移效果. 语法: transform: translateX(x); /*沿X轴方向平移*/ transfor ...
html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网
在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果.缩放,指的是"缩小"和"放大"的意思. 语法: transform: ...
html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网
内边距padding,又常常被称为"补白",它指的是内容区到边框之间的那一部分.内边距都是在边框内部的. 一.padding局部样式从CSS盒子模型中我们可以看出,内边距分为4个 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
css背景透明(css背景透明度怎么设置)
CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: backgroun ...
html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...

背景大小比率css,背景大小：background-size - CSS3 | 绿叶学习网

背景大小比率css,背景大小：background-size - CSS3 | 绿叶学习网相关推荐

最新文章

热门文章