当图片缩小后失真和用固定定位时失效的解决方法

标题当图片失真时我们可以用

1，background-size的cover的属性值介绍
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

2、background-position的属性值介绍
background-position后可跟2个值，2个值用空格间隔开，第一个值，固定代表水平方向（横向）左、中、右距离，第二个值，固定代表垂直上、下距离

下面我们来看一下缩小后图片失真的效果图

是不是感觉好难看?这时候我们可以在他css样式里面添加
这个两个属性和属性值

background-position: center center; 
 background-size: cover;

可以看看添加后的效果图

用固定定位时滚轮下调时img把导航条给该压住了解决方法

这时可以看看被遮挡住时的效果图由于是这图片有些img图片不能外传 所有我把他给涂鸦了 还请大家见谅！为了大家能看的更清楚 所有我给他导航条盒子容器添加了border边框

当往下翻的时候 img 会被图片遮挡

下面我们来看一下解决后的效果

这时我们可以给固定定位的容器添加z-index：999 就可以解决这个问题

    position: fixed;
    top: 0px;
    left: 0;
    z-index: 9999;