css分析 - 背景

背景

例子来自colorui及网上一些资源，不定时更新

1. 深色

a. 效果

b. 使用

基础使用
动态使用

c. css样式分析

例子都只取一个，其他的css样式都是类同的

//白色字体，蓝色背景
.bg-blue {
    background-color: #0081ff;
    color: #ffffff;
}

2. 淡色

a. 效果

b. 使用

基础使用
动态使用

c. css样式分析

//注意没有空格，属于多类选择器
.bg-blue.light {
    color: #0081ff;
    background-color: #cce6ff;
}

多类选择器例子：

This is a paragraph.
This is a paragraph.
// red blue orange会匹配一下共计七种，按权重覆盖
//权重（10） .red  .blue  .orange
//权重（20） .red.blue  .red.orange  .blue.orange
//权重（30） .red.blue.orange
//同权重覆盖的顺序与css里定义的顺序有关,相同属性最后定义的覆盖前面的，不同则叠加
//最终匹配效果为{color:black;font-size: 60px;text-indent: 10px;}
This is a paragraph.

3. 渐变

a. 效果

b. 使用

基础使用
动态使用

c. css样式分析

.bg-gradual-red {
    //45°角线性渲染 （0°对应时钟秒针的0秒，90°对应15秒，180°对应30秒，270°对应45秒）
    background-image: linear-gradient(45deg, #f43f3b, #ec008c);
    color: #ffffff;
}

图片背景

a. 效果

b. 使用

c. css样式分析

.bg-img {
    //把背景图片放大到适合元素容器的尺寸，图片比例不变
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
//注意这里需要用relative，使其固定在一个容器内（否则下面的绝对位置直接从起点开始）
.bg-mask {
    background-color: #333333;
    position: relative;
}
//遮罩层的实体（主要是黑色+透明度0.4）
.bg-mask::after {
    content: "";
    border-radius: inherit;
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

荧光效果

网上看见一个荧光效果，觉得蛮好看就扒过来分析了一下https://www.jianshu.com/p/c501fee6fb68

a. 效果

b.代码

    
    
    
    
    


    
    
        
        
            
赠汪伦
            
李白
       
                
李白乘舟将欲行，
                
忽闻岸上踏歌声。
                
桃花潭水深千尺，
                
不及汪伦送我情。
 
        
    

c.分析

荧光效果主要是:before和:after伪元素起的作用，先将其注释起来，看下原本的效果：

可以看见并没有荧光效果。

.box:before, .box:after{background:linear-gradient(235deg,#89ff00,#060c21,#00bcd4);}

这个是给2个伪元素添加一个线性渲染的背景

 .box:before{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -1;}

有了上面蒙层的介绍，这个效果就是整体向外拉伸了2px。z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:

.box:after{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -2;filter:blur(40px);}

和before一样，就是多了个高斯模糊，注释了黑色背景来看下.box:after的效果:

所以将3层叠加起来就有了荧光和边框效果。