CSS知识课堂（二）

1、实现背景图片透明，图片之上的文字正常显示

 技术点有二：

1、背景图片透明，其上的文字正常显示

2、文字垂直居中显示

分析：文字显示在背景之上，那么给文字的z-index：99；

          文字是不定宽高的，用absolute+transform来实现

难点：发现将中间内容的元素透明度设为0.5，文字也会继承此特性，变为0.5

因此采用：::before伪类来实现

最终利用三层结构来实现

代码结构如下：

main：最外层，设置position:relative;

content:中间层，设置position:absolute,和伪类::before.在before中设置背景图片，并给图片添加opacity属性。

inner：最内层，用来垂直居中不定宽高的文字

实现代码：

   .content-wrapper {
            width: 100%;
            position: relative;
            height: 400px;
        }
        .content::before{
            content: "";
            background-image: url(imgs/elephant.jpg);
            opacity: 0.3;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 400px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .inner {
            z-index:100;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

2、水平垂直居中

元素结构如下：

    
123123

（1）定宽高元素适用

• absolute + 负margin

（2）不定宽高的元素

• absolute + transform
• css-table

• .wp {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  .box {
      display: inline-block;
  }

•  flex

• .wp {
      display: flex;
      justify-content: center;
      align-items: center;
  }

• grid

• .wp {
      display: grid;
  }
  .box {
      align-self: center;
      justify-self: center;
  }

如上述代码.inner的实现/

3、 实现一个图片，鼠标移动上去的时候换为图片文字介绍

技术点：了解3个CSS3属性

（1）backface-visibility 属性定义当元素不面向屏幕时是否可见。

（2）transition 属性设置元素当过渡效果，四个简写属性为：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

（3）Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

rotateY：定义沿着 Y 轴的 3D 旋转。

  .front,
        .back {
            width: 30%;
            height: 200px;
            position: absolute;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: -webkit-transform 300ms;
            transition: -webkit-transform 300ms;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            border-radius: 5px;
            margin: 3% 2% 10% 2%;
        }

        .front p {
            text-align: center;
            font-size: 15px;
            color: #00F;
        }

        .front img {
            width: 100%;
            height: 200px;
        }

        .back {
            background: -webkit-linear-gradient(top left, #009970, #84DD63);
            background: linear-gradient(to bottom right, #009970, #84DD63);
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }
      .item:hover .front {
            -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }  

        .item:hover .back {
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        } 

4、animation 的简单用法：让图片动起来

.clouds img {
	max-width: 250px;
}

.clouds img:nth-child(1) {
	position: absolute;
	left: 0;
	bottom: 0;
	animation:mymove 5s infinite;
}
@keyframes mymove {
	from {
		left: 0;
	}
	to {
		left:100%;
	}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {left:0px;}
	to {left:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}

用@keyframes来定义动画需要产生的效果；

分这样是这样