“小白的我”第二天日报

今天完成的事情：

1.任务七成功做完，已提交审核；

2.学会了css半透明方法，opacity，rbga（）和hsla（）；

3.学会了.dot>span可以简写相同字符span。

明天计划的事情：

1.学会bootstrap；

2.学习任务8需要的知识点；

遇到的问题：

1.opacity很多情况用起来不顺手，需要多些代码配合使用；

2.<audio>的contros属性显示的音频控制太难看了，影响布局，无法更改样式；

3.任务七做的分文件较多，相对路径显示错误；

4.雪碧图无法随页面大小缩放。

解决方案：

1.opacity用来设置背景颜色和边框的时候较麻烦，于是找了其他方法：

1.1RGBA的详细解释，rgba(r,g,b,a)

取值说明

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间

正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值

RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0），那该元素就是完全透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明

1.2.opacity的详细解释opacity: value|inherit

取值说明

value:透明度，从 0.0 （完全透明）到 1.0（完全不透明）

Tip：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)

1.3.rgba和opacity的区别

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。也就是说使用opacity设置透明，子元素也跟着透明，而使用RGBA设置透明，子元素不跟着透明。

1.4.opacity和filter的区别

opacity兼容CSS3 opacity的浏览器，是标准属性，代表透明度，取值范围是0-1，0代表完全透明，1代表完全不透明。filter兼容IE8以及低版的IE浏览器，是IE特有的，filter:Alpha(opacity=50)，filter这里的alpha是css中的函数，opacity参数代表透明度，取值范围是0-100，0代表完全透明，100代表完全不透明。

1.5.配合使用的兼容案例组合

案例1：需要子元素不透明的组合？

{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0d53bc, endColorstr=#CC0d53bc);

}

案例2：需要子元素透明的组合？

{ filter:alpha(opacity=80);

}

2.这个实在是想不到，还是左师兄指点了一下：

2.1通过移动和旋转controls播放器的位置，使controls播放器的播放按钮和设置的播放按键完全重合，然后隐藏controls的播放器，达到点击播放的效果，初见时不由得拍案叫绝，简洁灵活运用知识点的典范，代码如下：

html：

css：

3.相对路径问题以前学过，当时觉得简单和用处不大，结果栽了跟头，惭愧，重新学习一遍后小结一下：

3.1写法一：相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

举例1：

<!-- 当前目录中的图片 -->

<img src="2.jpg">

<img src=".\2.jpg"> 

<!-- 上一级目录中的图片 -->

<img src="..\2.jpg">

img 是image“图片”的简写，src 是英语source“资源”的缩写。

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

../要么不写，要么就写在开头。

举例2：

<img src="images/1.jpg">

3.2写法二：绝对路径

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://img.smyhvae.com/2016040102.jpg">

上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

相对路径，就是../ image/ 这种路径。从自己出发，找到别人；

绝对路径，就是http://开头的路径。

绝对不允许使用file://开头的东西，这个是完全错误的！

4.雪碧图的原理是通过控制background-position属性值来确定图片呈现的位置，如果我们要求雪碧图随页面缩放的时候你会发现无法成功，接下来就要用下面的方法了：background: url(../../) no-repeat 0 0/100%或者background: url(../../) no-repeat 0 0/cover这两个都可以实现。

介绍background: url(../../) no-repeat 0 0/100%：

雪碧图的宽和高除以单个图片的宽和高，得出雪碧图是单个图片的多少倍，然后设置设置图片大小为：

8% 50%/930%; 这个数值是我的雪碧图宽高除以单个图片的宽高后得到的。

举例：

当以单张图片的大小设置元素宽高时，定位之后呈现出的刚好是和元素大小相同的图片，所以当用百分比单位设置元素宽高时，元素会随着页面放大，雪碧图也会跟着同比例放大。

收获：

1.学会了css半透明技术；

2.学会了<audio>标签；

3.学会了使用button跳转页面；

4.学会了相对路径和绝对路径，并会熟练使用；

5.学会了设置随页面等比例放大的雪碧图技术；

6.学会了确定放大图片倍数的zoom属性；

7.攒够了做出任务七的熟练度了。