background-size属性

background-size:属性有 auto；length ；百分比

length 如：10px 20px 固定的

或者是写成一个，10px 另外一个就默认为 auto;

写成百分比的形式是相对于div的宽度或者是高度的包含padding 但是不包含 border的

background-size:cover 意思是背景图片全部填满整个div，往往需要配合background-position:center；来使用，是图片的中间和div的中间在一个中心点。唯一的

缺点就是需要制作一个足够大的背景图片，否则图片会失真。

background-size:contain 可以是背景图像保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应定义的背景区域。

总之，只有当background-size:值默认为auto的时候，背景图片才不会失真，而其他设置都会导致背景图片的失真，所以使用

的时候要仔细考虑，避免带来不良的后果。

具体的可以自己写一个demo来验证一下。就写到这里。

转载于:https://www.cnblogs.com/agansj/p/8567411.html

background-size属性相关推荐

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
Background 全属性实例图解（10种全）(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
background复合属性顺序_background：常用背景属性（复合属性）
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...
element select 自动展开_原生js 让select下拉框自动展开可用size 属性来代替展开动作...
找遍全网都没一个比较好的例子!!! 什么获得焦点事件,或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法 size 属性规定下拉列表中可见选项的数目. 如果 size 属性 ...
总结：实例化SqlParameter时，如果是字符型，一定要指定size属性，还有制定具体的类型...
源地址在csdn上逛看到了这篇帖子,值得学习,就需要记录下来,转载给大家看! 以前在实例化SqlParameter时,通常都是用下面的语句,没有设置size属性: new SqlParameter( ...
string[x]:size 属性具有无效大小值0
SqlParameter[] lists={new SqlParameter("@test",SqlDbType.VarChar),new SqlParameter("@ ...
[html] input元素size属性和width 的区别是什么？
[html] input元素size属性和width 的区别是什么? size:在MDN的定义:控件的初始大小.以像素为单位.但当type 属性为text 或 password时, 它表示输入的字符的 ...
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
html中font size默认值,HTML basefont size 属性
HTML size 属性 size 属性定义了HTML文档的字体大小,取值可以是数值或者相对值,值域为1-7,1最小,默认值为3,请参考下述示例: 实例规定页面上的默认字体大小: 这是一个标题这是 ...
background系列属性
1.background-color背景颜色属性 ①颜色表示方法英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色也 ...

background-size属性

background-size属性相关推荐

最新文章

热门文章