css 属性选择器学习+css3 混合模式+css background

1.css [attribute]选择器

[attribute]         [target]           选择带有 target 属性所有元素。  
[attribute=value]   [target=_blank]    选择 target="_blank" 的所有元素。    
[attribute~=value]  [title~=flower]    选择 title 属性包含单词 "flower" 的所有元素。    
[attribute|=value]  [lang|=en]         选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]  a[src^="https"]    选择其 src 属性值以 "https" 开头的每个 <a> 元素。   
[attribute$=value]	a[src$=".pdf"]     选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。    
[attribute*=value]  a[src*="abc"]      选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

属性选择器具有很多简单高效的作用，再加上还可以有类似正则的选择能力，很有用。最后三个属性常用。
例子：

var x = document.querySelectorAll('a[href$=".asp"]');
console.log(x);
//可以获取到页面上所有href以.asp结尾的a元素。

2.css3混合模式 ： mix-blend-mode
混合模式是当层重叠时计算像素最终颜色值的方法，每种混合模式采用前景和背景颜色值（分别为顶部颜色和底部颜色），执行计算并返回颜色值。
这是css3的新特性，在chrome,firefox等支持良好，不需要前缀，可以实现很多有趣的效果。

在图片上使用 mix-blend-mode: multiply样式, 所有白色的部分会被转为透明，显示底层的其他颜色。这个特性具有很大的作用。
这个属性值很多：
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
默认情况下是会混合所有比起层叠顺序低的元素的，如果我们希望值混合某一两个元素，而不是全部，需要使用CSS3 isolation:isolate，具体参见MDN。
其他参见MDN。
3.background相关属性

background-attachment: fixed;
//背景图片位置fixed，相对屏幕不动。
background-position: center center;
background-size: cover;
//cover值表示覆盖，多出来的不可见
background: url('https:xxxx.jpg') no-repeat;

1.background-size:
值有数字或者百分比以及
cover   
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

这些就是常用的background属性，对于背景图片的使用很重要。
模仿bilibili背景图片特效：

<style type="text/css">
        body{
            background-color: #f2f3f5;
        }
        .center{
            width: 208px;
            height: auto;
            margin: 20px auto;
            box-shadow: 0 1px 3px 0 rgba(80,80,80,.11);
            border-radius: 8px 8px 0 0;
        }
        .up{
            width: 208px;
            height: 312px;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            cursor: pointer;
            transform: rotate(0deg);
            /*这里的rotate(0deg)会解决一个border-radius和scale的bug*/
        }
        .down{
            height:50px;
            padding: 10px;
        }
        .img{
            width: 100%;
            height: 100%;
            background-position: center top;
            background: url('https://i0.hdslb.com/bfs/album/97232ff4c55b30d44e5d71563edce2efcaf56836.jpg') no-repeat;
            background-size: cover;
            border-radius: 8px 8px 0 0;
            transition: transform .3s ease;
        }
        .img:hover{
            transform: scale(1.05);
        }
        .name{
            line-height: 25px;
            font-size: 15px;
            cursor: pointer;
        }
        .author{
            line-height: 25px;
            font-size: 12px;
            color: gray;
            text-align: center;
            cursor: pointer;
        }
        .name:hover,.author:hover{
            color:pink;
        }
    </style>

<div class="center">
        <div class="up">
            <div class="img"></div>
        </div>
        <div class="down">
            <div class="name">虞美人</div>
            <div class="author">不哭的小小白</div>
        </div>
</div>