前端基础(问答6-2)


keywords: 雪碧图、img与css背景、title与alt、div水平居中、图片水平居中、元素透明。


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

CSS Sprite是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样一来,当访问该页面时,图片不会一张一张的慢慢显示出来,减少网络请求。

CSS Sprite在线工具

  • img标签和CSS背景使用图片在使用场景上有何区别。

对于固定不变的内容,如图标等用CSS背景图。对于可变的内容,图片是和内容相关的,用img图片(比如验证码、用户头像、广告图片)。

  • title 和 alt属性分别有什么作用。

title一般起到提示的作用。比如在img标签加属性title,当鼠标移动到图片上时,会显示文字提示。
alt是当图片无法显示时,在图片的位置用预先设定的值替代。

title
alt

-###background: url(abc.png) 0 0 no-repeat;这句话是什么意思。
这是background属性的简写,分别是:

background-image:url(abc.png)  规定背景图像的路径abc.png;
background-position:0px 0px;     规定背景图像的位置、偏移量;
background-repeat:no repeat;     规定背景图像不重复;```

- ###background-size有什么作用? 兼容性如何? 常用的值是?
background-size规定背景图片的尺寸。常用的值:

cover :把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域;
px :给背景图片指定宽高;
百分比 :原图像大小的倍数```

background-size
2016-06-18_10-52-15.png
  • 如何让一个div水平居中?如何让图片水平居中.

div水平居中:对该div使用margin:0 auto;
图片水平居中:对上一级的块级元素使用text-align:center;

2016-06-18_11-28-41.png
  • 如何设置元素透明? 兼容性?

对元素使用样式属性opacity。

2016-06-18_11-04-25.png
  • opacity 和 rgba都能设置透明,有什么区别.

opacity是对元素加透明度(可以是文本、图像、背景色),而rgba是对元素加颜色(在此基础上可以调节透明度)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,675评论 32 459
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,519评论 0 5
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法,就是将...
    鸿鹄飞天阅读 457评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,241评论 0 8
  • Day02【回忆,一张照片引发的思考】 回忆,一张照片引发的思考 30,大心脏 什么时间照的照片? 这是2010...
    大心脏梁国庄阅读 248评论 1 0