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;
}

控制元素透明度

• 通过opacity: 0.25 (改变当前元素以及子元素）
• 通过设置元素背景色RGBA，background: rgba(255,0,0,0.25) (只改变当前元素的透明度，不影响子元素）

css实现一个气泡图

<div class="popup" position="bottom"></div>

.popup {
   min-width: 100px;
   min-height: 30px;
   line-height: 30px;
   background: #93ec69;
   padding: 0 10px;
   border-radius: 4px;
   margin: 10px;
   display: inline-block;
   position: relative;
}

.popup:before {
 content: '';
 width: 15px;
 height: 15px;
 background: #071833;
 border: 1px solid #0065bd;
 display: block;
 position: absolute;
}
.popup[position='bottom']:before {
 top: 100%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(45deg);
 border-left: none;
 border-top: none;
}