一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图像和背景图片合并到一张图片上,然后利用css的背景定位来显示的图片部分。
作用:

  • 减少加载网页图片时对服务器的请求次数;

  • 提高页面的加载速度;

  • 减少鼠标滑过的一些bug.

二、img标签和CSS背景使用图片在使用场景上有何区别?

如果一张图片是网页内容的一部分,就该用img,否则建议用CSS背景图。要注意logo是否属于网页内容的一部分。

示例:

如图:百度logo就是img,二维码就是CSS背景图呈现出来的。

在网页加载过程中,以CSS背景图存在的图片会等到结构加载完成之后开始加载,而html中的标签img是网页结构的一部分,会在加载结构的过程中加载,如果引入一个很大的图片,

在图片下载完成之前,img内容都不显示。但是CSS引入同样的图片,网页内容和结构加载完成,才开始加载背景图片,不会影响用户浏览网页内容。

三、title和 alt属性分别有什么作用?

  • alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个应为字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。

  • title属性为设置该属性的元素提供建设性的信息。使用title属性提供非本质的额外信息。

四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思?

background:url(abc.png) 0 0 no-repeat;设置了背景图片的属性:

background-img:url(abc.png)指定要使用的背景图片;

background-position:0 0:指定背景图片的位置;

background-repeat:no-repeat:指定背景图片仅显示一次。

示例:

五、background-size有什么作用? 兼容性如何? 常用的值是?

background-size:用于控制背景图片的大小。

兼容性:

浏览器 background-size
Firefox 3.6, Firefox 4 支持
Chorme10 支持
IE6,IE7,IE8 不支持
IE9 支持
Opera10,Opera11 支持

常用的值是:

  • auto:此值为默认值,保持背景图片的原始宽度和高度;

示例:

  • length:用于给background-size一个具体的值;

示例:

其中第一个值是给背景图片添加了宽度;第二个值是给背景图片添加了高度值

  • percentage

示例:

  • cover:图片会放大到适合容器的尺寸

示例:

  • contain

示例:

六、如何让一个div水平居中?如何让图片水平居中?

使得div水平居中使用margin:0 auto;示例:

图片水平居中:

在它所在的块级元素中添加text-align:center;

示例:

七、如何设置元素透明? 兼容性?

可以使用:

  • css3的opacity:x,x的取值从0-1

  • css3的rgba(red green blue alpha),alpha的取值从0-1

兼容性:

opacity

浏览器 兼容性
IE6,7,8 不支持
IE9,10,11 支持
chrome2.0.x 支持
Firefox3.0.10,3.5 支持

rgba

浏览器 兼容性
IE6,7,8 不支持
IE9,10,11 支持
chrome2.0.x 支持
Firefox3.0.10,3.5 支持

八、opacity和 rgba都能设置透明,有什么区别?

opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。

示例:

参考:

  1. CSS background-repeat 属性

  2. CSS background 属性

  3. When to use IMG vs. CSS background-image?

  4. 翻译 – CSS3 Backgrounds相关介绍

  5. CSS3 Background-size

注:版权所有,若有转载请注明来源

CSS常见技巧的更多相关文章

  1. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

  2. CSS hack技巧

    CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...

  3. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  4. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  5. 2天驾驭DIV+CSS (技巧篇)(转)

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. IE6的那些css常见bug(汇总)

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  7. python基础===Python 代码优化常见技巧

    Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 8 ...

  8. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  9. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

随机推荐

  1. app端上传文件至服务器后台,web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  2. BC之Claris and XOR

    http://acm.hdu.edu.cn/showproblem.php?pid=5661 Claris and XOR Time Limit: 2000/1000 MS (Java/Others) ...

  3. poj 3278:Catch That Cow(简单一维广搜)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 45648   Accepted: 14310 ...

  4. 搭建angular前端框架 命令

    首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angula ...

  5. PS图层混合模式实例详解

          PS中的很多概念都和Core Graphics中的概念相通,比如蒙版.路径.裁剪.混合模式等等.如果你对Core Graphics中的混合模式不太理解,阅读本篇文章能让你对Core Gra ...

  6. python + selenium &lt;二&gt;

    应用Webdriver,实现自动化 #coding:gbk from selenium import webdriver import os from selenium.webdriver.suppo ...

  7. Array.from()

    es6 Array.from() 方法将两类对象转为真正的数组 用法:用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包含ES6新增的数据结构Set和Map); 说明: ...

  8. python的socket解析

    1.实现一对一的进行沟通交流 (1).服务端代码如下: import socket server = socket.socket() server.bind(("localhost" ...

  9. linux audit审计(7-1)--读懂audit日志

     auid=0 auid记录Audit user ID,that is the loginuid.当我使用lbh用户登录系统时,再访问audit_test,此时记录的auid为1001,具体日志如下: ...

  10. Integer 的 valueOf 方法 与 常量池(对 String Pool 的部分理解)

    举例: public class Test { @org.junit.Test public void intTest() { Integer t1 = 128; Integer t2 = 127; ...