css CSS Alpha透明度和渐变

Posted 2021-05-13

GRADIENTS

LINEAR
background-image: linear-gradient(topcolor, bottomcolor); //top to bottom
background-image: linear-gradient(to top, bottomcolor, topcolor); //bottom to top
background-image: linear-gradient(to left, leftcolor, rightcolor); //right to left
background-image: linear-gradient(45deg, bottomleftcolor, toprightcolor); //angel bottom-left to top-right

RADIAL




/*
rgba(255, 255, 255, 0.8)
0=transparent, 1=opaque

Must have 2 containers: 1 to apply bg-img and 1 to appy the color and maybe a 3rd layer for text.
Follows the z-index rules.

<div class="image-bg">
  <div class="alpha-bg">
    <p>Just some text.</p>
  </div>
</div>
*/

.image-bg {
  width: 400px;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  
  /* sets the background image */
  background: url(https://unsplash.it/400/300) no-repeat;
  
  /* sets gradient and image */
  background: linear-gradient(rgba(255, 255, 255, 0.8),
                 rgba(199,21,133, 0.5)),
                 url(https://unsplash.it/400/300) no-repeat;
}

.alpha-bg {
  padding: 20px;
  height: 100%;
  color: #eeeeee;
  
  /* sets the color with alpha transparency */
  background: rgba(70,130,180, 0.8);
}

/*
If you don't have a second container to apply the color styles to just use multiple background images instead and a GRADIENT.
*/

/*shorthand*/
background: url(image1.png) no-repeat top right,
            url(image2.png) no-repeat bottom left;

/*longhand*/
background-image: url(image1.png), url(image2.png);
background-repeat: no-repeat, no-repeat;
background-position: top right, bottom left;

/*
To overlay a color
*/
selector {
  background: linear-gradient(rgba-top-color, rgba-bottom-color); //use same values if you don't want gradient
              url(image.png);
}