背景图片等比缩放的写法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 这样指定大小为18*14的写法就可以起到类似img中的等比缩放效果
注意:单个图片可以用left center来左上角定位
2、另一种写法:
.tag-icon {
背景图片等比缩放的写法background-size简写法的更多相关文章
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- css样式背景图片设置缩放
一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...
- background-size 设置背景图片的大小
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...
- background-size (设置背景图片的大小)
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- css06背景图片
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 首页背景图片在PC端有显示,在手机端不显示的解决方法
今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...
- vs code 的背景颜色主题还有背景图片的自定义方法
先说颜色主题吧: 依次点击文件--->首选项---->颜色主题 你就可以看到不同的颜色主题了 如果你还觉得不好看,不满意,不符合你的审美风格 你还可以在插件库里面下载相关插件: THEME ...
随机推荐
- ubuntu上面安装eclipse android到adt下载方法
如果自动安装有问题的话,就需要手动安装,其实是差不多的,唯一不同的就是手动下载ADT插件包,http://dl.google.com/android/ADT-0.9.6.zip ,可以下载到. 版本号 ...
- qemu -hda /dev/sdc -m 1024 -vga std
同事拿了个烂u盘让我给他做个启动盘,用cp *.iso /dev/sdc怎么也启动不了. 改用dd if=copied/20140923/debian-7.6.0-amd64-DVD-1.iso of ...
- do{...}while(0)的妙用(转)
源:http://www.cnblogs.com/lizhenghn/p/3674430.html 在学习第一门编程语言时,就已经介绍了顺序分支.条件分支.循环分支.比如循环分支有for.while. ...
- 1209:Catch That Cow(bfs)
题意: 从一个坐标到另一个坐标的移动方式有三种,即:st-1,st+1,2*st.每移动一步时间是一秒. 给出两个坐标,求得从第一坐标到第二座标的最短时间. #include<iostream& ...
- Android调用第三方so
http://blog.csdn.net/jiuyueguang/article/details/9450597 ubuntu下整合eclipse和javah生成jni头文件开发android的nat ...
- C# dev gridcontrol中添加checkbox复选框
文章来源 csdn weinierbian http://blog.csdn.net/weinierbian/article/details/6255402 添加一列,FieldName为 " ...
- PageRank算法第一篇
摘要by crazyhacking: 一 搜索引擎的核心问题就是3个:1.建立资料库,通过爬虫系统实现:2.建立一种数据结构,可以根据关键词找到含有这个词的页面.通过索引系统(倒排索引)实现.3排序系 ...
- 用PS给图标添加外发光效果
最近在做app的时候用到了图标需要根据点击和非点击显示两种状态(原始状态和外发光状态). 如下图: 没办法,因为这是毕业设计的东西,总不能叫同事帮忙处理下.所以自己充当了回美工. 做法如下: 1.打开 ...
- transform和transition
作者:zccst 例如:图片墙 .另外还有,便签墙 使用的样式: 1,正常情况下 ul#index_cards li { background: url("../images/ca ...
- bzoj 4002: [JLOI2015]有意义的字符串
这个题... #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i <= b; i++) #define d ...