###精通css读书笔记

---

#####第4章 背景图像效果 1、黑科技——标题旁边logo

.h_logo{  
  padding-left: 40px;
  background-image: url('../../img/1.jpg');
  background-repeat: no-repeat;
  background-position:top left; //设置图像位置
  background-size: contain; //把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
}

2、不透明度opacity继承问题

.opacity{
  background-color:rgb(2, 124, 156);
  border-radius: 4px;
  opacity: 0.4;
  padding: 10px;
  margin-bottom: 10px;
}
.rgba{
  background-color:rgba(2, 126, 154,0.4);
  border-radius: 4px;
  padding: 10px;
}

3、css视差效果 设置3层背景图，根据初始位置 background-position的不同，在改变浏览器大小的时候，造成有深度的感觉

.bodyground{
  width: 100%;
  height: 800px;
  /* overflow: auto; */
  background-image: url("../../img/2.jpeg");
  background-repeat: repeat-x;
  background-color: #000;
  background-position: 0 0;
}
.midground{
  width: 100%;
  height: 800px;
  background-image:url(../../img/1.jpg);
  background-repeat: no-repeat;
  background-position: 30% 0;
}
.forground{
  width: 100%;
  height: 800px;
  background-image:url(../../img/3.jpg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 80% 0;
}

####第5章 —— 链接 1、简单的链接相关属性 （1）链接伪类选择器 ：link —— 没有被访问过的链接 ：visited —— 被访问过的链接 （2）动态伪类选择器 ：hover —— 鼠标滑过 ：active —— 被单击时/激活 ：focus —— 键盘移动到目标，同步鼠标悬停 2、