CSS常见技巧

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

Sprite可以把多个图片集中放在一个大图中,以减少网页的网络请求次数,来提高网页加载的速度,比如一些小的icon都放在一张大图之中,显示的时候由background-position来设置位置显示。

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

img标签的图片里面有src可以实时和数据库交换数据,对每个人看到的显示的图片可以都是不一样的,而CSS里面写background-img的话是写死的图片,每个人看到的都会是一样的,不适合用于网页经常需要变更内容的图片区域。

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

img中的title是鼠标放上去可以看到的文字的说明

img中的alt是当图片无法加载无法显示的时候来替代图片来显示的。

而且搜索引擎想知道你的图片是什么图片就是靠alt里面的文字内容来识别的。

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

背景图片引用abc.png 

0 0是指背景图片的放置位置,是一个坐标轴的概念。

no-repeat是指背景图片引入进来后不要以重复的形式铺满一个地方,直接一个图片就好了,铺不满就不满。

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

background-size是规定图片尺寸用的一个属性

background-size

background-size常用的值就是length、percentage、cover、contain。

length 设置背景图像的高度和宽度。如果只设置一个值,则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。


关于cover&contain

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

让div水平居中可以写代码margin: 0px auto;

做一个演示:


DIV和图片都是居中的写法

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


opacity兼容

直接设置opacity: 0;可以让元素透明,并且可以自定义设置透明度,并且元素的事件依旧是会被触发的。是一个比较常用的方法。

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

opactiy可以应用于图片和文字。

RBGA只能表示背景的不透明度。

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

                                                     

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

推荐阅读更多精彩内容

  • 课程目标 熟悉常见的样式写法,如背景图片、居中、透明等 学习建议 问答题一定要动手写 demo,否则学习效果只能达...
    饥人谷_江君阅读 4,251评论 0 1
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...
    dengpan阅读 2,784评论 0 0
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法,就是将...
    鸿鹄飞天阅读 3,196评论 0 0
  • 啊啊啊啊,要开始看论文了,感觉时间都不够用,好忧伤。 一.CSS Sprite(雪碧图|精灵图)指什么? 有什么作...
    婷楼沐熙阅读 3,619评论 7 2
  • 一,CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 答:把小图标和背景图合并到一张图,通过backgr...
    kingBirds阅读 1,430评论 0 0