设置背景图片的大小,以长度值或百分比显示,还可以通过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. Linux 系统的网络基础_【all】

    网络基础 1.网线:568B: 白橙 橙色 白绿 蓝色 白蓝 绿色 白棕 棕色 2.交换机:电信号转发的网络设备,它可以为接入交换机的任2个网络节点设备提供电信号通信 3.路由器:连接局域网,广域网的 ...

  2. Centos下防止ssh暴力破解密码

    参考文章地址:https://yq.aliyun.com/ziliao/48446 https://www.cnblogs.com/lsdb/p/7095288.html 1.收集 /var/log/ ...

  3. ZT C语言链表操作(新增单向链表的逆序建立)

    这个不好懂,不如看 转贴:C语言链表基本操作http://www.cnblogs.com/jeanschen/p/3542668.html ZT 链表逆序http://www.cnblogs.com/ ...

  4. VRS外部文件

    igs08_1708.atx:IGS卫星和接收机段天线PCO改正 Configure:配置文件

  5. [装]JMX监控Hadoop

    http://chenjc-it.iteye.com/blog/1539746 实验成功!

  6. shell批量远程连接mysql的方法

    一.配置mysql服务器ip列表如下,可自定义: S1     1.1.1.1     3306 user passwd11   dbname_s1S2      2.2.2.2     3306 u ...

  7. springboot 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data.web.SpringDataWebAutoConfiguration.pageableCustomizer

    springboot +gradle 配置jpa启动报Error processing condition on org.springframework.boot.autoconfigure.data ...

  8. beautifulsoup4-4.3.2的安装

    下载地址:https://www.crummy.com/software/BeautifulSoup/bs4/download/4.5/ 安装成功,亲测可用! 参考文章http://blog.csdn ...

  9. Hive学习之路 (十)Hive的高级操作

    一.负责数据类型 1.array 现有数据如下: 1 huangbo guangzhou,xianggang,shenzhen a1:30,a2:20,a3:100 beijing,112233,13 ...

  10. vue-cli 安装失败Failed to download repo vuejs-templates/vuedemo: Response code 404 (Not Found)

    还原问题现场: 第一次使用vue init webpack projectName的时候,由于操作失误,执行了两次npm install -g vue-cli,然后再使用vue init webpac ...