Css - css 基本技巧

css 样式常用技巧汇总

css 渐变设置

 background-color: linear-gradient(#04204D, #075AA3);

背景图片铺满页面

 background: url("your-background-image.jpg") no-repeat center center fixed;
 background-size: cover;

同时设置多个背景图片及渐变色， 渐变色设置在最后，最后在图层中最低。

• 设置背景图片及渐变色

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left,   right;
}

• 同时设置三个背景图片

.multi-bg-example {
  background: transparent;
  background-image: url('@/assets/leftTop-decoration.png'),
    url('@/assets/rightTop-decoration.png'), url('@/assets/rightBottom-decoration.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left top, right top, right bottom;
  padding: 10px;
  box-shadow: none;
}