CSS文字颜色渐变_背景颜色渐变_文字背景图

 一、CSS文字颜色渐变测试效果

CSS文字颜色渐变代码

 <style type="text/css">
	h1{
	background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}
  </style>
  <h1>css测试文字文字颜色渐变css测试文字文字颜色渐变css测试文字文字颜色渐变</h1>

 二、CSS背景颜色渐变测试效果

 CSS背景颜色渐变代码

  <style type="text/css">
	h1{
	/*方法一deg为渐变角度 0deg 从下到上的渐变，90deg左到右的渐变  %百分比为渐变颜色的占比*/
     background-image: linear-gradient(141deg,#9fb8ad 0%,#1fc8db 51%,#2cb5e8 75%);
	/*方法二*/
    background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
	/*方法3*/
    background-image: linear-gradient(90deg,#3566ff,#00abfb);
	
	}
  </style>
    <h1>css测试背景背景颜色渐变css测试背景文<br>字颜色渐变css测试背景背景颜色渐变</h1>

三、CSS文字背景图片效果 

 CSS文字背景图片代码 

 <!---webkit-background-clip:text;这个属性以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 -->
<style type="text/css">
h1{
    width: 500px;
    height: 500px;
    margin: 40px auto;
    background: url("https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF") no-repeat center center;
    background-size: cover;
    font-size: 120px;
    font-weight: bold;
    text-align: center;
    line-height: 500px;
    /*很重要*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  </style>
    <h1>css测试背景背景颜色渐变css测试背景文<br>字颜色渐变css测试背景背景颜色渐变</h1>

CSS文字背景图片方法二

  <!-- 原理：白色背景的文字div使用定位覆盖到背景图片的div，再运用 mix-blend-mode 即可 -->
<style type="text/css">
.container{   
width: 500px;
height: 500px;
}
.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF");
    background-repeat: no-repeat;
    background-size: cover;
}
 
.text {
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;
}
<div class="container">
    <div class="pic"><div class="text">IMAGE</div></div>
 </div>

css文字阴影（配合字背景图片可以实现立体效果）

text-shadow: 7px 6px 12px #d7bb23;