css 图片相关

展示图片

1. 使用 <img /> 标签;
2. ::after 和 ::before 设置图片;
3. 鼠标 hover 自定义光标样式;
4. border-image 自定义边框图案;
5. list-style-image 设置列表项样式;
6. background-image 设置背景图片;

/* 居中不重复的背景图片 */
background: url(../asset/img/logo.jpg) no-repeat center;

/* x轴重复 */
background: url(../asset/img/logo.jpg) repeat-x;

/* background 是以下属性值的缩写
    image: 背景图片 
    color: 背景颜色 
    repeat: 定义图片重复的方式 可选值 repeat-x/repeat-y/repeat/space/round/no-repeat
    size: 背景图片大小 可选值 contain/cover/百分比/具体像素
    clip: 背景图片延伸到哪个位置 可选值 text/border-box/padding-box/content-box 
    origin: 背景图片相对于哪个区域开始摆放 border-box/padding-box/content-box
    attachment: 背景图片在视口内固定还是随包含它的区块滚动 scroll/fixed/local
    position: 相对origin为图片设置初始位置  left/bottom/top/right/center/百分比/具体像素
    position-x: 设置背景图片在水平方向的位置 left/center/right/百分比/具体像素
    position-y: 设置背景图片在垂直方向的位置 top/center/bottom/百分比/具体像素
*/

div::after{
  content: url(../asset/img/logo.jpg);
}

cursor: url(../asset/img/cursor.jpg) auto;

/* border-image: source slice width outset repeat|initial|inherit; */
border: 10px solid transparent;
border-image: url(./images/logo.png) 30 30 10 round;

/* 列表项标记样式 */
list-style-image: url(./images/checked.png);

图片缩放

①纯css实现缩放

/* 方式一 */
transform: scale(.8);

/* 方式二 */
zoom: 50%；

②图片随鼠标滚轮缩放

/* html */
<img src="./images/desktop.jpg" alt="" onmousewheel="return zoom(this)" />

/* javascript */
function zoom(el) {
    var zoom = parseInt(el.style.zoom, 10) || 100;
        zoom += event.wheelDelta / 100;
        console.log(event.wheelDelta);
        if (zoom > 0) {
            el.style.zoom = zoom + '%';
        }
    return false;
}

图片填充设置

object-fit 可以设置替换元素 (<img /> <iframe>...) 的内容如何填充到容器中，在<img /> 元素中的使用如下:

object-fit: contain;

/* object-fit 包含以下几种值, 
   fill: 默认值，填充，图片填满容器，可能会改变宽高比，导致图片拉伸;
   contain: 包含，整个图片会保持宽高比展示在容器中，可能会被缩放，部分背景会空白;
   cover: 覆盖，图片保持宽高比填满容器，图片可能会被裁剪;
   none: 保持图片原尺寸和比例;
   scale-down: 等比缩小，类似依次设置了 none 和 contain,最终展示尺寸较小的那个;
*/

图片位置设置

object-position 可以设置替换元素的内容在容器中的位置，可用 left、top 等方位值控制，也可以用具体的数值表示，在<img /> 元素中的使用如下:

object-position: left top;

/* 
  object-position: 水平方向可能的值       垂直方向可能的值
  object-position: left/center/right   top/center/bottom;
  object-position: 10px 15px; 
  如果只设置了一个值，则默认另一个方向的值为 center    
  如：object-position: top; => object-position: center top;
*/

图片热区

定义：在图片中指定某个区域，当用户点击该区域内时可以链接跳转到指定页面。
应用场景：中国地图图片点击具体的省份跳转到各省对应的官网。
创建图片热区:

/* 
  <area shape="rect/circle/poly" href="" coords="" target="_blank/_parent/_self/_top"> 
  shape: 规定区域的形状;  
  href: 目标 url;  
  coords: 坐标; shape="rect" => x1,y1,x2,y2; shape="circ" => x,y,radius
  target: 在何处打开目标 url
*/
<img src="../asset/images/china.jpg" usemap="#mapname"/>
<map name="mapname" id="mapname">
    <area shape="rect" href="" coords="0,0,50,50"/>
</map>

滤镜属性

filter 属性可以调节元素的视觉效果，如设置图片灰度、透明度、饱和度等

filter: none | 默认
        blur(px) | 高斯模糊
        brightness(%) | 亮度
        contrast(%) | 对比度
        drop-shadow() | 阴影
        grayscale(%) | 灰度
        hue-rotate() | 色相旋转
        invert(%) | 反相
        opacity(%) | 透明度
        saturate(%) | 饱和度
        sepia(%) | 深褐色
        url();

3 像素bug

描述：img 标签渲染之后下方会出现几个像素（谷歌是 4px, 火狐 3.5px）的空白；
原因：img 是行内元素，默认display：inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是贴紧容器下边缘，所以会有几像素的空白；
解决办法：
把 img 设置为display: block;
给 img 和其父元素都设置 vertical-align: top；让其 top 对齐而不是 baseline 对齐；
给 img 父元素设置 line-height: 0;