一、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. 关于for循环中,定义的i的作用域的问题。

    for(var i=0;i<2;i++){ console.log(i) } console.log(i) 经过测试:在IE9+,谷歌,火狐中.都出现了0,1,2三个值. 所以其作用域在整个上下 ...

  2. MySQL(三)

    MYSQL(三) 上一章给大家说的是数据库的视图,存储过程等等操作,这章主要讲索引,以及索引注意事项,如果想看前面的文章,url如下: MYSQL入门全套(第一部) MYSQL入门全套(第二部) 索引 ...

  3. MSSQL数据库安装失败

    1停止所有跟Sql相关的服务:控制面板-〉管理工具-〉服务2.在控制面板中卸载所有和SQL有关的一切程序或者组建3.注册表清理():3.1彻底删除SQL Server: hkey_local_mach ...

  4. UISegmentedControl和UIStepper的使用

    UISegmentedControl:分栏控件,常用的属性和方法是 1.tintColor:控制分栏控件的颜色风格 2.insertSegmentWithTitle(Image):插入分栏标题(图片) ...

  5. 1121高性能MySQL之运行机制

    本文来自于拜读<高性能MySQL(第三版)>时的读书笔记作者:安明哲转载时请注明部分内容来自<高性能MySQL(第三版)> MySQL的逻辑构架 MySQL服务器逻辑架构 最上 ...

  6. PHP中字符串的连接和换行

    PHP中字符串的连接使用点,不是加号.换行\n需要用双引号括起来,不能用单引号. eg. <?php print_r("hello"."\n"); pri ...

  7. 黑马程序员——【Java基础】——泛型、Utilities工具类、其他对象API

    ---------- android培训.java培训.期待与您交流! ---------- 一.泛型 (一)泛型概述 1.泛型:JDK1.5版本以后出现的新特性,用于解决安全问题,是一个类型安全机制 ...

  8. 关于Activity销毁,而绘制UI的子线程未销毁出现的问题

    项目总结 ----------------------------------------------------------------------------------------------- ...

  9. JAVA实现File类中的遍历操作并输出内容

    package shb.java.testIo; import java.io.BufferedReader; import java.io.BufferedWriter; import java.i ...

  10. PHP 递归的密码

    http://www.cnsecer.com/4146.html 说实话 真的很炫 好像还是不好理解啊