当前位置: 首页 > 编程日记 > 正文

背景图片等比缩放的写法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: rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px;
    display: inline-block;
    height: 9px;
    width: 9px;
}
注意:这里引用的是精灵图标集,该sprite图片原始大小是88*190,所有后面的数字是缩放精灵图片为原来一半的意思即44*95,前面的0 -70px是什么意思呢,其实就是在原精灵图片上要定位0 140px的地方,缩放后只要定位到0 -70px即可定位到精灵图标了。后面是图片的整个缩放大小,前面是缩放后的定位点。后面其实就是css3的background-size属性的简写,还可写成百分比形式,即一个50%即可
最后注意:还有一个坑就是less中遇到+,-,*,/符合它会计算,如上面代码中的70px/40px,它会计算出1.59使得background属性值无效(ff会报这个错)
所以遇到上面的代码写在less中的话要做到避免编译,写法是:~'.....';
background: ~'rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px';
只有这样写,上面带/的代码才不会被编译成计算式。

相关文章:

深入了解以太坊

正在看这篇文章的你,应该是一名被区块链技术所吸引的开发者或者极客。我相信你已经理解了区块链的技术原理,并急切地想要搞清楚这项技术将为你和你的开发技术栈带来怎样的影响。 如果你需要更基础的区块链技术介绍,可以阅读比特币和以太坊的白…

Netty和JDK源码来看Netty的NIO和JDK的NIO有什么不同

JDK底层提供了NIO实现,在Linux环境会调用内核epoll。 但是Netty通过JNI的方式提供了Native Socket Transport,为什么Netty要自己搞一套NIO呢? 这篇文章带你从jdk的源码和Netty的源码角度来分析为什么Netty要这么做。 JDK源码:openjdk-8u40 Netty源码:netty-4.1 1.先看J…

【数据结构】单链表的实现(C语言)

单链表是线性表链式储存的一种形式,其中的结点一般含有两个域,一个是存放数据信息的info域,另一个是指向该结点后继结点存放地址的指针next域。一个单链表必须要有一个首指针指向链表中的第一个结点。 单链表要掌握以下几种操作:…

《理解 OpenStack + Ceph》---来自-[爱.知识]-推荐

企业IT技术分享(2016-06-29)来自(QQ群:企业私有云平台实战 454544014-推荐)!理解 OpenStack Ceph (1):Ceph OpenStack 集群部署和配置http://www.cnblogs.com/sammyliu…

windows10 安装 mysql8.0.12 详解

【1】下载安装包 官网下载地址:https://downloads.mysql.com/archives/community/ 如下图所示: 下载完成,安装包为mysql-8.0.12-winx64.zip 【2】安装准备 (1)安装路径。拷贝安装包到任意路径,然后解压缩。…

IDEA常用和实用配置以及各种必要插件

主要是收集IDEA常用和不常用配置陆续更新 ------------------------ 启动项目配置 建议使用idea2021.1.3以上版本: ------------------------ maven没有设置自动导包,导致引用不到第三方依赖。 可以点maven的刷新按钮即可。 idea 设置gradle自动更…

linux 调试利器gdb, strace, pstack, pstree, lsof

1)如何使用stracepstack利器分析程序性能?http://www.cnblogs.com/bangerlee/archive/2012/04/30/2476190.html此文有详细介绍怎么用strace和pstack2)Linux下多线程查看工具(pstree、ps、pstack)?http://blog.csdn.net/yfkiss/article/details/67293643)使用strace,lstrace,t…

【数据结构】单链表的应用(C语言)

1、设计一个算法,求一个单链表中的节点数 2、设计一个算法,在一个单链表中值为y的结点前插入一个值为x的结点(值为x的新结点为成为值为y的结点前驱结点) 3、设计一个算法,判断单链表中各结点是否有序 4、设计一个算…

物联网设备僵尸网络趋势分析

物联网(IoT)僵尸网络作者正在适应更安全的物联网设备的转变,这已经将***者的注意力转移到利用物联网设备的漏洞上。由于物联网设备安全性仍处于起步阶段,因此发现命令注入等基本漏洞并不少见。2018年11月,NetScout的As…

Redis6安装配置集群cluster以及集群宕机注意事项

Redis6的cluster模型推荐3主3从 先准备3台服务器,每个上面部署2个redis,服务器配置2核2G: 下面在每台服务器安装redis6,每台机器只要安装一次即可,然后分别配置2个端口的conf文件,分别起来即可&#xff1a…

【数据结构】循环单链表的实现(C语言)

循环单链表应掌握以下基本操作: 1、建立一个空的循环单链表。 2、获得循环单链表的最后一个结点的位置。 3、输出循环单链表中各结点的值。 4、在循环单链表中查找值为x的结点。 5、在循环单链表中第i个结点后插入值为x的新结点。 6、在循环单链表中删除值为x…

DTRACE 专家

http://dtrace.org/blogs/bmc/ https://github.com/bcantrill http://www.tudou.com/programs/view/Q6fHZFgZww4 http://dtrace.org/blogs/ahl/2012/04/24/btrace-dtrace-for-java-ish/ JAVA https://github.com/chrisa https://github.com/ahrens

统一客服消息返回错误:{errcode:43004,errmsg:require subscribe hint: [9Vv08633952]}

2019独角兽企业重金招聘Python工程师标准>>> 公众号或者小程序发送客服消息错误: {"errcode":43004,"errmsg":"require subscribe hint: [9Vv08633952]"} 场景:小程序使用公众号的服务消息,推送消息…

sublime Text 开发工具

简介描述 Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。,具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text …

【数据结构】双链表的实现(C语言)

双链表中的结点包括3个域,一个是存放数据信息的info域,另两个是指阵域,这里用llink和rlink表示,llink指向它的前驱结点,rlink指向它的后继结点。 双链表要掌握以下基本操作: 1、创建一个空的双链表。 2、…

ShardingSphere-Proxy分库分表以及多租户安装使用

需求:你提供SAAS服务,你有你有2个租户(商户),各自的数据进各自的库,而你不希望你的微服务java里默认配置多个租户数据源,数据连接池太多,而且后面动态增加也不方便,诸如此类很多问题。 方案&am…

jenkins自动化部署工具

jenkins自动化测试 & 持续集成 知识点: 1。下载地址:jenkins.io download: 转载于:https://www.cnblogs.com/kaixinyufeng/p/10123419.html

android 图片水印处理 文字倾斜处理

方法一: 获取一个textview 从textview中获取bitmap,将bitmap 通过matrix进行角度变换,然后将原图和此bitmap合并; 方法二: 将原图获取bitmap后,得到canvas,将canvas进行角度变换,…

Centos下MySQL安装与配置

一、mysql简介说到数据库,我们大多想到的是关系型数据库,比如mysql、oracle、sqlserver等等,这些数据库软件在windows上安装都非常的方便,在Linux上如果要安装数据库,咱不得不首先推荐的是mysql数据库了,而…

【数据结构】链式栈的实现(C语言)

栈的链式存储称为链式栈,链式栈是一种特殊的单链表,它的插入和删除规定在单链表的同一端进行。链式栈的栈顶指针一般用top表示。(个人理解:相当于只对单链表的第一个结点进行操作) 链式栈要掌握以下基本操作&#xff1…

opencv python 匹配

opencv python 匹配

DI 依赖注入实现原理

深度理解依赖注入(Dependence Injection) 前面的话:提到依赖注入,大家都会想到老马那篇经典的文章。其实,本文就是相当于对那篇文章的解读。所以,如果您对原文已经有了非常深刻的理解,完全不需要…

【数据结构】链式队列的实现(C语言)

队列的链式存储称为链式队列。链式队列就是一个特殊的单链表,对于这种特殊的单链表,它的插入和删除操作规定在单链表的不同端进行。链式队列的队首和队尾指针分别用front和rear表示。 链式队列要掌握以下基本操作: 1、建立一个空的链式队列…

离线安装k8s 1.9.0

说明本文参考 https://segmentfault.com/a/1190000012755243。在前 文基础上整理、增加说明,避坑。 踩过的坑: 安装k8s 1.9.0 实践:问题集锦 环境说明 环境信息(采用一个master节点两个node节点) 192.168.1.137 tensorflow0 node …

eclipse 和 google拼音输入法冲突问题

eclipse每次当我按ctrl鼠标点击 代码 ,本来应该是跳转到相应地方,可是现在每次一点eclipse就关掉。苦经搜索才知道,原来是使用eclipse时同时使用了谷歌拼音的问题,只要不要在点的时候使用谷歌输入法就好了。唉,谷歌拼音…

【腾讯bugly干货分享】微信Android热补丁实践演进之路

为什么80%的码农都做不了架构师?>>> 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?modviewthread&tid1264&extrapage%3D1 继插件化后&…

【ACM】杭电OJ 1001

是一道简单的题目&#xff0c;我只想要说&#xff1a;注意输出格式&#xff01; #include "stdio.h" int main () {int n,sum;while(scanf("%d",&n)1){sum0;for(int i1;i<n;i){sumi;} printf("%d\n\n",sum);}return 0; }

大数据处理也要安全--关于MaxCompute的安全科普

[TOC] 1.企业大数据处理现状 当今社会数据收集手段不断丰富&#xff0c;行业数据大量积累&#xff0c;数据规模已增长到了传统软件行业无法承载的海量数据&#xff08;百GB、TB乃至PB&#xff09;级别。基于此&#xff0c;阿里云推出有了一套快速、完全托管的GB/TB/PB级数据仓库…

自创设计模式-----答题卡模式

该模式是解决触发条件和触发结果的解耦&#xff0c;同时兼顾触发条件资源的可释放性。目的是为了获得触发结果。 /*** */package com.baidu.coolapp.answer;import java.util.Hashtable;import com.baidu.coolapp.composite.IComposite;/*** author liweigao**/public interfac…

The system cannot find the file specified

在家工作&#xff0c;程序在家里的电脑运行时&#xff0c;出现一个异常&#xff0c;还是第一见到&#xff1a; Server Error in / Application. The system cannot find the file specified Description: An unhandled exception occurred during the execution of the current…