设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

background-size

语法详解:

要在插入图片之后进行设置背景图片的大小

 background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

CSS3设置背景图片的大小的更多相关文章

  1. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

  2. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  3. css3 设置背景图片大小(缩略图形式缩小)

    废话当然不说了. 直接上代码 <style> #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; back ...

  4. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  5. css3-11 如何改变背景图片的大小和位置

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  6. [Netbeans]为面板设置背景图片

    与AndroidStudio等类似IDE不同,在Netbeans开发桌面程序时,不可以直接通过src=@drawable 等方法为窗口设置背景图片.这里介绍一种简便的方法: 1:首先,拖动一个面板到f ...

  7. qt 设置背景图片

    博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...

  8. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  9. Qt 设置背景图片3种方法(三种方法:QPalette调色板,paintEvent,QSS)

    方法1. setStylSheet{"QDialog{background-image:url()"}}  //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...

随机推荐

  1. 关于UIScrollView有些你很难知晓的崩溃情形

    关于UIScrollView有些你很难知晓的崩溃情形 为了实现以下的功能(按钮之间的切换效果): 简短的代码如下: // // RootViewController.m // BUG // // Co ...

  2. Proxyee-down的下载与安装教程

    源代码在:GitHub_proxyee-down 为了节约读者的时间,我把需要的资源文件打包好,百度云链接在下面 Proxyee-down最新版为2.54(2018.8.9更新) 最新版下载地址:链接 ...

  3. 铁乐学Python_day05-字典dict

    1.[字典dict] Python内置了字典:dict的支持,dict全称dictionary, 在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 字典和列表直观上 ...

  4. Programming Assignment 5: Burrows–Wheeler Data Compression

    编程作业五 作业链接:Burrows-Wheeler Data Compression & Checklist 我的代码:MoveToFront.java & CircularSuff ...

  5. win8中常见问题排查

    1. 无法使用内置管理员账户打开 1.1 启动组策略编辑器:运行中“gpedit.msc”,1.2 依次展开“计算机配置”--->“Windows设置”--->“安全设置”--->“ ...

  6. 【CF1009F】Dominant Indices

    题目 长链剖分板子题啊 长链剖分有几个神奇的性质 所有长链的总点数为\(n\) 任意一个点的\(k\)级祖先所在长链的长度肯定不小于\(k\) 从任意点到根经过的短边数量不超过\(\sqrt{n}\) ...

  7. 全局唯一Id:雪花算法

    雪花算法-snowflake 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的. 有 ...

  8. [HNOI2005]汤姆的游戏

    嘟嘟嘟 直接O(n ^ 2)暴力判断就行了. 对于圆,判断该点和圆心的距离是否小于半径. 然而为啥我这么写编译不过: scanf("%lf%lf%lf%lf", &a[++ ...

  9. mac 安装secureCRT

    下载 http://www.xue51.com/mac/1632.html 会得到下面的文件: 打开dmg文件: 将SecureCRT移到Applications中,然后点击打开一次(重要): 然后打 ...

  10. nodejs的expresss中post的req.body总是undefined的原因

    1)因为express将body-parser分离了出来,所以你需要手动添加进下面的内容即可 var path = require('path'); var bodyParser = require( ...