文字背景图片

下面是这次的所有HTML和css

主要说的是如何把照片放到字体里面去。下面就是大概的一个效果，另外还加了一个鼠标移入移出变换图片的效果。

 

 

background-size：cove；描绘的意思是此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

 

transparent 描绘的意思是透明。

color：transparent；字体变透明了。

background-clip 意思是在指定背景图像的绘画区域

background-clip:text 背景图像的绘画区域是字体；

 

简单点说就是先把字体透明然后再把图像绘画到字体中；

 

最后我用伪类选择器去变换文字中的图片。

 

h1：hover  把鼠标放在h1上的状态。

linear 动画从头到尾的速度是相同的。

 

transition：1s linear；把鼠标放在h1上后过度动画1秒动画从头到尾的速度是相同的。