css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类: 
1.是一整张大图,尺寸和区域大小刚好吻合
2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。
css3出现以后,可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox,chrome,以及ie9上都可以使用。
具体使用方法如下:
背景图尺寸(数值表示方式):
#background-size{ background-size:200px 100px; }
背景图尺寸(百分比表示方式):
#background-size{ background-size:30% 60%; }
背景图尺寸(等比扩展图片来填满元素,即cover值):
#background-size{background-size:cover; }
背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
#background-size{ background-size:contain; }
背景图尺寸(以图片自身大小来填充元素,即auto值):
#background-size{ background-size:auto; }

在css中设置图片的背景图,怎么设置图片纵向拉伸的更多相关文章

  1. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  2. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  3. CSS实现事件穿透与背景图不跟随滚动条

    1. 事件穿透属性:pointer-events: none  // auto默认值.none:不捕捉target事件(实现穿透) 用途:当需要使用透明遮罩并且允许点击遮罩下方元素时,或需要使用背景容 ...

  4. 移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  5. 页面中图片以背景图形式展示好还是以img标签形式展示

    img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...

  6. css设置全屏背景图,background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  7. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  8. html+css-->background-img(背景图的设置)

    背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉)    1.inherit:从父元素继承属性设置    2.background-repeat:平铺(在图片大小小于元素尺寸时 ...

  9. 齐博x1背景图如何设置标签

    背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...

随机推荐

  1. Halcon和Opencv区别

    Halcon:机器视觉行业里知名的商业视觉库,非开源的,在国内市场份额处于第一,其提供了1500个多个API算子供开发人员使用,有些编程基础的都可以轻松的入门,其调试也是很方便的,断点单步运行,图像变 ...

  2. PAT——乙级1036:跟奥巴马一起编程 &乙级1027:打印沙漏 (有坑)

    乙级1036 1036 跟奥巴马一起编程 (15 point(s)) 美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014 年底,为庆祝“计算 ...

  3. 基本数据类型的成员变量放在jvm的哪块内存区域里?

    几个月前自己提问的一个问题没人回答,现在突然翻到,自己回答下: 问题: 比如class{private int i;}如上代码,之前一直以为基本数据类型都是放在虚拟机栈中的,最近看了<深入理解j ...

  4. js保留两位小数,不四舍五入

    //不进行四舍五入,保留两位小数 function getKeepTwoDecimals(val) { var newVal = (parseInt(val * 100) / 100).toFixed ...

  5. esayui combotree 只能选择子节点

    esayui combotree 只能选择子节点用onBeforeSelect:参数是node,节点被选中之前触发,返回false取消选择动作. 网上找了好多都没一个可用的,要想知道他是子节点还是根节 ...

  6. 【bzoj5060】魔方国 乱搞+特判

    题目描述 一张未知的有重边无自环的图,只知道点数为n,边数为m.可以标记若干个点,如果一个点被标记,那么与它距离不超过k的点(包括本身)都会被覆盖. 显然对于每张不同图,让所有点被覆盖的最小代价是不一 ...

  7. null?对象?异常?到底应该如何返回错误信息

    这篇文章记录我的一些思考.在工作了一段时间之后. 问题的核心很简单:到底如何返回错误信息. 学生时代,见到过当时的老师的代码: if (foo() == null) { } 当然,这位老师是一位比较擅 ...

  8. 【算法】Prüfer编码 —— HNOI2004树的计数

    的确,如果不知道这个编码的话的确是一脸懵逼.在这里放一篇认为讲的很详细的 BLOG,有关于编码的方式 & 扩展在里面都有所提及. 欢迎点此进入 --> 大佬的博客 在这里主要想推导一下最 ...

  9. [Leetcode] Balanced binary tree平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  10. BZOJ_DAY6???

    昨天没睡好啊啊啊,真是要命,睡不着,今天状态爆炸...34题击破. 下一步目标:网络流24题,树链剖分. (洛谷比赛了好开心,希望这次能比以前强吧,嗯)