设置背景图片的大小,以长度值或百分比显示,还可以通过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】

    Linux常见快捷键(6个) ctrl + u:剪贴光标前面 ctrl + k:剪贴光标后面 ctrl + y:粘贴 ctrl + r:查找命令 ctrl + insert:复制 shift+ ins ...

  2. Excel截取特定字符后面的值

    应该用到三个字符串函数:LEFT.RIGHT.MID 1.LEFT函数: 用法:LEFT(要提取字符所在单元格,从左侧开始提取的个数) 例如:=LEFT(A1,2) 意思是从A1单元格提取前两个字符. ...

  3. P2245 星际导航

    题目描述 sideman 做好了回到 Gliese星球的硬件准备,但是 sideman 的导航系统还没有完全设计好.为了方便起见,我们可以认为宇宙是一张有 N 个顶点和 M 条边的带权无向图,顶点表示 ...

  4. 如何搭建github+hexo博客-转

    1.前言 其实早在这之前我就一直想过写博客,但由于种种原因一直没有去学习这方面的知识,最近半个月(从开始动手到搭建好)一直陆陆续续的在着手这方面的工作.从开始到搭建完成的过程中遇到了很多困难,因为在这 ...

  5. virtualbox迁移已建虚机存储磁盘方法

    1. 先关闭虚拟机 2. 将虚拟机的磁盘拷贝或移动到想要存储的位置,virtualbox一般为.vdi文件(虚拟磁盘文件) 3. vboxmanage internalcommands sethduu ...

  6. robotframwork接口测试(五)—接口分层测试粗解

    个人小结,仅供参考. 接口测试很简单,但是很重要. 可以写代码,也可以用工具进行测试.工具说说就很多了,简单介绍一下我目前用过的几个能够测试接口的工具, Burpsuite:这类偏请求攻击类软件 Fi ...

  7. Electron简介和安装使用

    一.Electron简介Electron的应用,使得了JS不仅仅可以BS端项目,还可以做CS端项目. 另外今天之所以研究下Electron,还是因为公司的需要,业务场景是,通过Electron.js开 ...

  8. TensorFlow入门:线性回归

    随机.mini-batch.batch(见最后解释) 在每个 epoch 送入单个数据点.这被称为随机梯度下降(stochastic gradient descent).我们也可以在每个 epoch ...

  9. vue-cli代理开发

    如何设置接口代理? 一.找到config文件下的index.js 二.找到dev里面的proxyTable他的值就是一个{},这里为了方便配置配置文件单独写成一个文件 dev: { env: requ ...

  10. CSDN博客清理缓存

    CSDN博客清理缓存 清着清着 訪问量少了将近2w 积分少了几百 唉 你这是要闹什么呀 说9点结束 如今都几点了