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来验证一下。就写到这里。

background-size属性的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  3. 项目总结——SqlParameter的参数设置长度(size属性)

    看到很多朋友在实例化SqlParameter时,通常都没有指定参数的长度就直接给参数赋值了.就像下面的写法: new SqlParameter("@address", SqlDbT ...

  4. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  5. 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。

    最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...

  6. size属性

    size 属性 size 属性规定输入字段的尺寸(以字符计): <form action=""> First name:<br> <input typ ...

  7. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  8. C# 调用存储过程出错:String[3]: Size 属性具有无效大小值 0

    存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...

  9. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  10. [转]实例化SqlParameter时,如果是字符型,一定要指定size属性

    转自:http://bbs.csdn.net/topics/380155255 以前在实例化SqlParameter时,通常都是用下面的语句,没有设置size属性: new SqlParameter( ...

随机推荐

  1. v-model指令及其修饰符

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. openwrt network 初始化

    openwrt 烧写完成之后, 第一次启动会设置 network 的相关参数, 如 ip地址, mac地址, 等. 这里跟踪一下启动之后直到网络参数设置的过程. /sbin/init -> pr ...

  3. 全志Android SDK编译详解(二)

    注意要确定安装了jdk) 第一步: cd  lichee; ./build.sh  -p sun5i_elite -k 3.0  (apt-get install uboot-mkimage需要安装m ...

  4. FFT用到的各种素数

    int MOD; inline int mul(int a, int b){ return (long long)a * b % MOD; } int power(int a, int b){ ; ) ...

  5. 一个简单的servlet

    1.创建一个自己的servlet文件,继承HttpServlet MyServlet.java package com.jmu.ccjoin.controller; import java.io.IO ...

  6. HDU 5651xiaoxin juju needs help

    xiaoxin juju needs help Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  7. centos 网络连接查看

    安装iftop. 这个得先安装epel #yum install epel-replease -y #yum install iftop -y #iftop

  8. seafile看不见repo报500错误的解决方法

    环境 seafile-server-6.2.5 centos7.5 1804 现象 seafile服务器所在的VPS没动过,前一天seafile用还好好的,昨天客户端突然不能登录了,显示“服务器内部错 ...

  9. 禅道——Linux服务器部署禅道

    前言 2019年6月14日 22:01:24 看看时间我知道,我离猝死依然不远~ 禅道是什么 | 禅道是专业的研发项目管理软件 禅道的官网 | https://www.zentao.net/ 禅道开源 ...

  10. 获取cookies的简单代码(总结待续)

    Cookie[] cookies = request.getCookies(); Cookie cookie = null; for (int i = 0; i < cookies.length ...