美文网首页
任务9-2:CSS常见技巧

任务9-2:CSS常见技巧

作者: 饥人谷_徐小坤 | 来源:发表于2016-08-25 18:28 被阅读0次

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

把背景图合并成一张大图,通过background-position定位图片,当打开页面时只需加载一次这张大图,从而减少网络请求。

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

img标签用于经常变动的图片,如头像。
css背景用于固定不变的图片,如图标。

3.title和 alt属性分别有什么作用?

title:
(1)可以放在<title></title>之间来显示网页的标题
(2)为链接添加描述性文字,就是当鼠标放到图片上时会显示title属性里面的内容,以达到补充说明或者提示的效果。而且对于seo没什么作用。


title的作用

alt:
(1)用来指定替换文字,对图片起到一个注释的作用,它只能用在img、area和input元素中(包括applet元素)。用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
(2)利于seo的作用


alt的作用

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

背景图片引入的地址为abc.png,在水平方向和垂直方向不偏移,而且背景图片不重复。

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

作用:设置背景图片的固定尺寸来展示
常用的值:length、percentage、cover、contain


兼容性

6.如何让一个div水平居中?如何让图片水平居中?

div水平居中:
设置margin: 0 auto;
图片水平居中:
(1)给图片添加一个父容器,在图片的父容器上设置text-align: center;
(2)设置display: block; margin: 0 auto;

7.如何设置元素透明? 兼容性?

opacity:0~1; filter:alpha(opacity=50)
background:rgba(255,0,0,0~1)


opacity兼容性 rgba的兼容性

8.opacity和 rgba都能设置透明,有什么区别

opacity:作用于元素,以及元素内的所有内容的透明度
rgba:只作用于元素的颜色或其背景色


相关文章

  • 任务9-2 CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧图就是把你要使用的一些小图标或背景图片合...

  • 任务9-2 CSS常见技巧

    1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite是一种网页图片的处理技术,...

  • 任务9-2:CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? 把背景图合并成一张大图,通过background...

  • 任务九~CSS常见技巧

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...

  • 任务9- CSS常见技巧

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? 为了提高网页的性能,减少加载次数(减少http请求次...

  • 任务9-CSS常见技巧

    课程目标 熟悉常见的样式写法,如背景图片、居中、透明等 学习建议 问答题一定要动手写 demo ,否则学习效果只能...

  • 任务9- CSS常见技巧

    2016/05/18 @hunger 说: CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 主要是指将...

  • 任务九(2)-CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 答:因为每一个url都会发送一次网络请求,然而ic...

  • 任务9- CSS常见技巧

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 简介CSS Sprites(雪碧图|精灵图)是一种...

  • 任务9-css常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 雪碧图指的是把一个网页上需要用到的多张图片整合到一...

网友评论

      本文标题:任务9-2:CSS常见技巧

      本文链接:https://www.haomeiwen.com/subject/esaosttx.html