设置背景图片的大小,以长度值或百分比显示,还可以通过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 系统开机自启的配置文件

    程序开机启动的配置文件(/etc/rc.local) # 系统级别 ntsysv # 图形界面设置自启程序 chkconfig(/etc/init.d/sshd) 处理开机启动的文件 # 用户级别 # ...

  2. zabbix的日常监控-磁盘性能监控(十二)

    监控磁盘的性能 参考文章: https://wiki.enchtex.info/howto/zabbix/zabbix_iostat_monitoring https://blog.csdn.net/ ...

  3. Hadoop HBase概念学习系列之HBase里的4维坐标系统(第一步定位行键 -> 第二步定位列簇 -> 第三步定位列修饰符 -> 第四步定位时间戳)(十八)

    HBase里的4维坐标系统(第一步定位行键   ->   第二步定位列簇  ->  第三步定位列修饰符   ->  第四步定位时间戳) HBase里的4维坐标系统(第一步定位行键   ...

  4. 微信小程序 取随机数

    第一思路 如:现在要从50<  . =<100内取一个随机数: ran.Next(1,50)生成的是1-50的随机数+50 结束 第二思路 Math.random()的取值范围是: 0&l ...

  5. XGBoost 输出特征重要性以及筛选特征

    1.输出XGBoost特征的重要性 from matplotlib import pyplot pyplot.bar(range(len(model_XGB.feature_importances_) ...

  6. [EffectiveC++]item28:避免返回handles指向对象内部成分

    可以先参考一个帖子:http://bbs.csdn.net/topics/390731394?page=1

  7. You may experience an access violation when you access an STL object through a pointer or reference in a different DLL or EXE

    Symptoms When accessing an STL object created in one DLL or EXE through a pointer or reference in a ...

  8. [MongoDB]------windos远程服务器部署连接

    1.连接前的准备 这里就省略了服务器上安装的操作,跟上一节是一样的流程. 连接到远程服务器,首先需要到远程服务器上在mongoDb安装根目录下的bin文件夹(默认安装目录是C:\Program Fil ...

  9. 【转】 android中的文件操作详解以及内部存储和外部存储

    摘要 其实安卓文件的操作和Java在pc环境下的操作并无二致,之所以需要单独讲解是因为安卓系统提供了不同于pc的访问文件系统根路径的api,同时对一个应用的私有文件做了统一的管理.根据我的经验,初学者 ...

  10. React-Native 之 index.android.bundle

    问题: index.android.bundle  这个bug 我相信很少同学会遇到,然而就是这个问题,困扰了我跟我的同事多天, 各种方法处理:  进入 android 目录  ./gradlew c ...