background img 等比缩放

背景图片等比缩放的写法background-size简写法

1.背景图片或图标也可像img一样给其宽高就能指定其缩放大小了. 比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是: background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll left center / 18px 14px; //left center是图标定位,/后面的18px 14px是指定背景图标应用的大小,原图标大小是36px 28px 这样指定大小为

PHP图像处理之在原图像处理

处理原有的图像图片处理,缩放,裁剪,翻转,旋转,透明,锐化等图片操作一.创建图片资源 imagecreatetruecolor(width,height); gif jpg png imagecreatefromgif(图片名称); imagecreatefrompng(图片名称); imagecreatefromjpeg(图片名称); 画出各种图形(圆形.矩形.线段

android shape实现阴影或模糊边效果

1.实现阴影或模糊边效果方式: 2.通过shape来实现,具体是通过layer-list 多层叠放的方式实现的 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item> <shape androi

理解CSS3中的background－size(对响应性图片等比例缩放)

理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用background-size:400px 200px缩放设置固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置固定宽

CSS3中的background－size(对响应性图片等比例缩放)

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图

css之background的cover和contain的缩放背景图

对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小. 等比例缩放图象到垂直或者水平其中一项填满区域. cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小. 等比例缩放图象到垂直和水平两项均填满区域. 读了还是不懂,那么看下面的例子: contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景

css样式之background详解

background用法详解: 1.background-color 属性设置元素的背景颜色可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000) rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0) transparent 默认背景颜色为透明 2.backgroun

【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有单位",赤裸裸的0-1之间的数字就行,表示为缩放比例. ③倾斜--->skew(参数a,参数b),单位deg,两个参数分别表示x,y方向上的倾斜角度,

CSS实现图片缩放特效

今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片缩放</title> <link rel="stylesheet" href="css/master.css" media="

css样式之background详解（格子效果）

background用法详解: 1.background-color 属性设置元素的背景颜色可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000) rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0) transparent 默认背景颜色为透明 2.backgroun

CSS 中关于background 属性功能

background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像这个属性是我们用的最多的属性设置背景图像有两个方式 background: url("img/01.jpg") ; 或者 background-image: url("img/01.jpg"); background-color 定义背景颜色 (三个属性) 属性为元素设置一种纯色.这种颜色会填充元素的内容.内边距和边框区域,扩展到元素

HTML5 图片缩放功能

腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, support = { transform3d: ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()), touch: ("ontouchstart" in wind

wpf图片查看器，支持鼠标滚动缩放拖拽

最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class="PictureViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi

解决android:background背景图片被拉伸问题

ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前景),bg是背景,可以同时使用. 此外:scaleType只对src起作用:bg可设置透明度,比如在ImageButton中就可以用android:scaleType控制图片的缩放方式如上所述,background设置的图片会跟View组件给定的长宽比例进行拉伸.举个例子, 36x36 px的图标

CSS实现背景图尺寸不随浏览器缩放而变化

方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-back

让低版本IE支持css3背景图片缩放属性background-size

IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: 100% 100%;//css3 铺满元素 background: none \9;//IE重置背景图片 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/yuehuibtn.png', siz

css3 TransformZ() 3D缩放

transformZ()函数做了一个在Z轴移动的工作,3D空间中,Z轴垂直于x-y所在平面-也就是界面所在的平面,而我们的视角正好垂直于xy平面,所以进行transformZ() 3D缩放,其实在我们的视角中是一个在远离X-Y平面与接近X-Y平面的过程,当其值为0可以理解为就在x-y平面上:当其为正值的时候,其向指向界面外移动,当其值愈大,则移动得愈远,在我们的视角,就会呈现一个愈来愈大的元素:反之为负值,则会向界面内进行移动,其负值愈小,则离界面愈远,我们视角看上去它呈现的元素就愈来愈小.

css3 background

background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个属性,缩写如下: background:background-color,background-image,background-repeat ,background-attachment, background-position; 其中background-image,background-rep

[css]通过transform缩放邮件客户端h5页面

摘要最近一直在折腾邮件通知的东东,大概逻辑就是如果有新邮件,向收件人的app推送一条服务号消息,并且在单击该消息的时候,需要展示邮件的详情. 技术这里是使用Exchange EWS API来实现的,通知的时候,只获取该邮件的标题,发件人信息,当用户单击查看详情的时候,拉取邮件详情,由于Exhcnage2012版本不支持纯文本格式的邮件内容,所以,在拉取的邮件信息是html格式的.这里面就涉及到如何自适应展示的问题. 中间尝试了几种对table,img做特殊处理方式,在我前面文章中也提到了这方

通过Canvas及File API缩放并上传图片完整示例

<!DOCTYPE html> <html> <head> <title>通过Canvas及File API缩放并上传图片</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <

WP8图片缩放功能实现

最近在学习WP8,想实现WP微信中查看图片时的放大缩小功能. 网上找了两个解决方案: 1 利用GestureListener 这个类在Microsoft.Phone.Controls.Toolkit中,GestureListener可以捕捉到WP手机屏幕上的手势动作. XAML文件: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Image x:Nam

background img 等比缩放

热门专题