在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" ...
随机推荐
- Linux的常用目录学习笔记
首先,先查看一下Linuxi的一级目录结构: ls: /:表示根目录,文件系统的入口,最高一级目录. bin和sbin:命令保存目录,bin是普通用户能,sbin是root用户用的:/bin存放着系统 ...
- fork开源代码后如何基于某个tag建立自己的branch
应用场景: 在github上fork一个自己想看的开源项目,想基于某个tag来写一些测试demo,然后可以做到版本控制. 方法: //克隆 git clone xxxxx.git //查看tag gi ...
- CodeForces Round #521 (Div.3) D. Cutting Out
http://codeforces.com/contest/1077/problem/D You are given an array ss consisting of nn integers. Yo ...
- 【bzoj3514】Codechef MARCH14 GERALD07加强版 LCT+可持久化线段树
题目描述 N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 输入 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M行,代表图中的每条边 ...
- 二分查找 Binaryserach
二分查找: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升 ...
- C++——OOP面向对象理解
从Rob Pike 的 Google+上的一个推看到了一篇叫<Understanding Object Oriented Programming>的文章,我先把这篇文章简述一下,然后再说说 ...
- C&C++——C与C++知识点
C++知识点系列之一(转+整理) 编程时类声明后面千万不要忘了加分号,不然会出现很多错误!! c系列之一一.#include “filename.h”和#include<filename.h&g ...
- [CERC2017]Intrinsic Interval——扫描线+转化思想+线段树
[CERC2017]Intrinsic Interval https://www.luogu.org/blog/ywycasm/solution-p4747# 这种“好的区间”,见得还是比较多的了. ...
- 【BZOJ 3195 】[Jxoi2012]奇怪的道路 装压dp
受惯性思维的影响自动把二进制状态认为是连与不连......... 我们这里二进制状态表示的是奇偶,这样的话我们f[i][j][k]表示的就是前i个城市用了j个边他前k个城市的奇偶状态,然后想想怎么转移 ...
- PowerMock
EasyMock 以及 Mockito 都因为可以极大地简化单元测试的书写过程而被许多人应用在自己的工作中,但是这 2 种 Mock 工具都不可以实现对静态函数.构造函数.私有函数.Final 函数以 ...