CSS 从大图选中取一部分地区做为总体目标标志的

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

1、照片素材

照片素材以下(尺寸:137px * 264px),图中从上到下,持续储放了两张100px * 100px的图

2、HTML编码

html编码以下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
    <style type="text/css">
        .icon {
   width:100px; /*--设定情况图显示信息地区宽度--*/
           height:100px;/*--设定情况图显示信息地区高宽比--*/  
            border:1px solid red;
            background-image:url(icons.png); /*--设定情况图象--*/
            /*--no-repeat 不容许图象在任何方位上平铺,repeat-y,repeat-x各自容许照片在y,x方位上平铺--*/
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
    <div class="icon up"><p>照片上半一部分</div>
    <div class="icon down"><p>照片下半一部分</p></div>
</body>
</html>

显示信息实际效果:

改动编码以下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
    <style type="text/css">
        .icon {
           width:100px; /*--设定情况图显示信息地区宽度--*/
           height:100px;/*--设定情况图显示信息地区高宽比--*/
            border:1px solid red;
            background-image:url(icons.png); /*--设定情况图象--*/
            /*--no-repeat 不容许图象在任何方位上平铺,repeat-y,repeat-x各自容许照片在y,x方位上平铺--*/
            background-repeat:no-repeat;
        }
        .up {
           background-position: 0px 0px;
        }
        .down {
           background-position: 0px ⑴00px;
        }
    </style>
</head>
<body>
    <p>照片上半一部分</p>
    <div class="icon up"></div>
    <p>照片下半一部分</p>
    <div class="icon down"></div>
</body>
</html>

显示信息实际效果:

3、总结

加载情况照片,依据必须设定展现区宽度和高宽比,及情况照片的部位,让其总体目标照片內容“正好落在”展现区,在其中关键是运用了background-position的1些特点,图解以下

表明:

background-position:0 0

情况照片的左上角和所属器皿左上角对齐,超过的一部分掩藏。等同于于 background-position: left top、background-position:0% 0%

background-position: 100% 100%

情况照片的右下角和所属器皿的右下角对齐,超过的一部分掩藏。等同于于background- positon: right bottom、background-positon:器皿(container)的宽度-情况照片的宽度,器皿 (container)的高宽比-情况照片的高宽比

background-position: 0 ⑴00px;。

情况照片从所属器皿左上角的地区向上挪动100px,超过的一部分掩藏。

background-position: 20 18x;。

情况照片从所属器皿左上角的地区向右移20px,向下移18px,超过的一部分掩藏。

background-position: ⑵0 ⑴8x;。

情况照片从所属器皿左上角的地区向左移⑵0px,向上移⑴8px,超过的一部分掩藏。

总结

以上所述是网编给大伙儿详细介绍的CSS 从大图选中取一部分地区做为总体目标标志的编码详解,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!