在css中设置图片的背景图,怎么设置图片纵向拉伸
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中设置图片的背景图,怎么设置图片纵向拉伸的更多相关文章
- background 设置文本框背景图
background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS实现事件穿透与背景图不跟随滚动条
1. 事件穿透属性:pointer-events: none // auto默认值.none:不捕捉target事件(实现穿透) 用途:当需要使用透明遮罩并且允许点击遮罩下方元素时,或需要使用背景容 ...
- 移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)
1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta name = ...
- 页面中图片以背景图形式展示好还是以img标签形式展示
img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...
- css设置全屏背景图,background-size 属性
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- html+css-->background-img(背景图的设置)
背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉) 1.inherit:从父元素继承属性设置 2.background-repeat:平铺(在图片大小小于元素尺寸时 ...
- 齐博x1背景图如何设置标签
背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...
随机推荐
- WebSocket 与 HTTP/2
个人笔记 WebSocket WebSocket 是一个双向通信协议,它在握手阶段采用 HTTP/1.1 协议(暂时不支持 HTTP/2). 握手过程如下: 首先客户端向服务端发起一个特殊的 HTTP ...
- 文件名的查找——find
查找文件!!! 命令格式:find [PATH] [option] [action] 一.参数1——与时间有关的参数 -atime.-ctime.-mtime -mtime n:在n天之前的“一天之内 ...
- mysql 5.7 Access denied for user 'root'@'localhost' solution
sudo vim /etc/mysql/debian.cnf # Automatically generated for Debian scripts. DO NOT TOUCH! [client] ...
- CSS设计指南之ID属性
1.用于页内导航的ID ID也可以用在页内导航连接中.下面就是一个链接,其目标是同一页的另一个位置. <a href="#bio">Biography</a> ...
- WebKit资源加载和网络栈
webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 WebKit资源加载 ...
- Oracle解决索引碎片功能
我们开始时向一个空的带索引的表中插入大量数据后,是不会产生碎片问题的,但是,数据库经过很长一段时间的增删改查后,难免会出现碎片问题,影响数据库的性能,Oracle对于这一问题有自己的解决方案. 下面介 ...
- 洛谷 P4168 [Violet]蒲公英 解题报告
P4168 [Violet]蒲公英 题目背景 亲爱的哥哥: 你在那个城市里面过得好吗? 我在家里面最近很开心呢.昨天晚上奶奶给我讲了那个叫「绝望」的大坏蛋的故事的说!它把人们的房子和田地搞坏,还有好多 ...
- Website Collection
前一百个卡特兰数 Candy?的博弈论总结 杜教筛资料 线性基资料 (ex)BSGS资料 斐波那契数列前300项 斯特林数 STL标准库-容器-unordered_set C++ unordered_ ...
- 【BZOJ 3907】网格 组合数学
大家说他是卡特兰数,其实也不为过,一开始只是用卡特兰数来推这道题,一直没有怼出来,后来发现其实卡特兰数只不过是一种组合数学,我们可以退一步直接用组合数学来解决,这道题运用组合数的思想主要用到补集与几何 ...
- Codeforces Round #506 (Div. 3) 题解
Codeforces Round #506 (Div. 3) 题目总链接:https://codeforces.com/contest/1029 A. Many Equal Substrings 题意 ...