一、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. c#实现万年历示例分享 万年历农历查询

    cs.cs(类页面) using System;using System.Collections.Generic;using System.Linq;using System.Web; namespa ...

  2. CNN 入门学习资料整理

    建议按序阅读 1. Convolutional Neural Networks卷积神经网络: http://blog.csdn.net/zouxy09/article/details/8781543 ...

  3. java 基础加强--书籍+题目+上机测试

    scjp test( 在线测试网站):http://scjptest.com/mock-test.xhtml <SCJP Sun® Certified Programmer for Java™ ...

  4. Kali Linux Web 渗透测试— 第十二课-websploit

    Kali Linux Web 渗透测试— 第十二课-websploit 文/玄魂 目录 Kali Linux Web 渗透测试— 第十二课-websploit..................... ...

  5. 回文数 第N个回文数

    判断回文数还是不难,如果能转为字符串就更简单了. 如果是求第N个回文数呢. 12321是一个回文数,这里先考虑一半的情况. 回文数的个数其实是有规律的.如: 1位回文数: 9个 2位回文数: 9个 3 ...

  6. 关于用phonegap+jquery moblie开发 白屏闪屏的解决方法

    前几天自己玩开发android应用,做些页面切换效果时,发现两个页面间切换间有白色闪屏的问题. 在网上找了很久的资料,还是没有解决. 最终,发现同事开发的android应用没有这个问题.对比代码排除发 ...

  7. node-odata: 基于 NodeJS 的 REST 框架

    该开源项目目前已被 OData 官网 (odata.org)收录 关于 node-odata node-odata 可以让你轻松创建 REST API, 并能使用 OData 协议的格式进行数据的查询 ...

  8. 【BZOJ】【1051】【HAOI2005】受欢迎的牛

    按B->A连边,tarjan缩点,然后找入度为0的连通分量,如果有1个,则ans=size[i],如果大于一个则ans=0: 当然如果按A->B连边就是找出度为0的(表示没有被它喜欢的,这 ...

  9. Qt之进程间通信(TCP/IP)

    简述 可以通过Qt提供的IPC使用TCP/IP,使用QtNetwork模块即可实现,TCP/IP在实现应用程序和进程内部通信或与远程进程间的通信方面非常有用. QtNetwork模块提供的类能够创建基 ...

  10. MAT(2)安装Memory Analyzer

    http://www.eclipse.org/mat/ 两大功能: 1.find memory leaks 2.reduce memory consumption 安装步骤: 1. 打开 eclips ...