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>