在背景图上加一层渐变层

有时需要在背景图片上结一层渐变的效果，是的背景看起来更加好看。可以使用两张图片重叠在一起的方式实现，但是感觉有点麻烦。也可以使用background-image 添加两张背景图片。感觉第二种方法比较简洁一些。

背景图中，可以通过background-position 来对多个背景进行定位。写法如下：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
                     url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
                     url("haorooms.jpg") 400px 201px no-repeat;

或者：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;  

如果背景重叠，只会显示第一种背景，要达到蒙层的效果，显示在上面的图片必须要设置透明度，不然后面的背景是看不到的。

要实现的效果：外层div的背景是里面的图片，背景上面加一些渐变的效果

<div class="tt">
    <img src="http://file.ihuayue.cn/group1/M00/0E/1E/Chtgd1onVniAdIERAAFh1V-5AnM171_120x160.jpg">
</div>


.tt { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 450px;
    background-image: 
    linear-gradient(to bottom, rgba(255,225,255,0) 70%, #fbfbfb 100%), 
    linear-gradient(135deg, rgba(84,225,255,0.8) 0%, rgba(170,136,151,0.65) 50%, rgba(255,47,47,0.5) 100%), 
    url(http://file.ihuayue.cn/group1/M00/0E/1E/Chtgd1onVniAdIERAAFh1V-5AnM171_120x160.jpg);
} 

这里写图片描述

背景上面的渐变效果如果比较复，通过css实现有点难度的话，也可以使用svg实现，有svg的编辑器，可以画出图像之后直接导出svg的代码，挺方便的。

// html
<div class="box">
    <img src="http://file.ihuayue.cn/group1/M00/0E/1E/Chtgd1onVniAdIERAAFh1V-5AnM171_120x160.jpg">
</div>

// css
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 450px;
    background: url(./svg/avg.svg),
                url(http://file.ihuayue.cn/group1/M00/0E/1E/Chtgd1onVniAdIERAAFh1V-5AnM171_120x160.jpg);
    background-size: 100% 100%;
}

// svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%;height: 100%;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(84,225,255);stop-opacity:0.8"></stop>
	    <stop offset="50%" style="stop-color:rgb(170,136,151);stop-opacity:0.65"></stop>
      <stop offset="100%" style="stop-color:rgb(255,47,47);stop-opacity:0.5"></stop>
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="70%" style="stop-color:rgb(255,225,255);stop-opacity:0"></stop>
      <stop offset="100%" style="stop-color:#fbfbfb;"></stop>
    </linearGradient>
  </defs>
  <rect x="0%" y="0%" width="100%" height="100%" fill="url(#grad1)"></rect>
  <rect x="0%" y="00%" width="100%" height="100%" fill="url(#grad2)"></rect>
</svg>

这里写图片描述