六 使用并美化网页图像

  • 1. 图像标签

  • 使用<img>标签,
  • 属性

    说明

    alt

    text

    定义图片的替代文本

    src

    URL

    图片的路径

    height

    Pixels、百分比

    定义图片的高度

    width

    Pixels、百分比

    定义图片的宽度

  • 2. 设置网页图像

  • 2.1  设置图片路径

  • 绝对路径:如:D:demoimg1.jpg;
  • 相对路径:以index.html为参照,即为。/img/01.jpg;
  • 在相对路径中,“./”表示同级目录,“../”表示上一级目录,“../../”表示上级的上级目录。
  • 2.2 设置图片的宽度和高度

  • 可用width和height属性设置,图片尺寸可选择数值或百分比
  • <img src="../图片/01.jpg" alt="" width="200px" height="200px">

    2.3 设置图像提示文字

  • 提示效果使用alt和title属性,
  • alt:图像没有下载完成时(或下载失败),才会显示alt属性设置的文字;
  • title:鼠标指针移动到图像上时,显示title属性;
  • 2.4 设置图像边框

  • border:width  style  color ;(1px solid gold)
  • 2.5 设置图像不透明度

  • opacity:value;(value:0-1;0表示完全透明;1表示完全不透明)
  • 2.6 设置圆角图像

  • border-radius:value;(设置一个值时,表示4个角设置相同圆角;也可以设置4个值)
  • 2.7 设置阴影图像

  • text-shadow:X,Y blur color;(X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色)是字的阴影;
  • box-shadow:X,Y blur color;
  •        (1) 阴影水平偏移量 :是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边; 

      (2) 阴影的垂直偏移量 :是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部; 

      (3) 阴影模糊半径 :此参数是可选,但其值只能是为正值如果值越大,阴影越模糊,反之阴影越清晰。如果其值为0时,表示阴影不具有模糊效果;

      (4) 阴影颜色 :此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数;

  • 2.8 设置图像与文字的对齐方式

  • vertical-align:设置图像与文字的对齐方式,一般是垂直方向的;(设置时class为img标签的属性)
  • 属性值

    说明

    baseline

    默认值,元素放置在父元素的基线上

    sub

    垂直对齐文本的下标

    super

    垂直对齐文本的上标

    top

    把元素的顶端与行中最高元素的顶端对齐

    text-top

    把元素的顶端与父元素字体的顶端对齐

    middle

    把此元素放置在父元素的中部

    bottom

    把元素的底端与行中最低的元素的底端对齐

  • 2.9  backgroung-color设置背景颜色

  • background-color和background区别

    1.background可以设置背景颜色、背景图片、定位等。而background-color只能设置背景颜色 。
    2.底色(background-color)是纯的色区。背景(background),可以是纯色也可以是图案。
    3.background的属性值是图片资源,而background-color的是颜色。

    2.10 backgroung-img设置背景图

    background-img:url('src') src:为背景图的路径;(在style标签里边)

    2.11 background-repeat 设置背景平铺

    属性值

    说明

    repeat

    背景图片水平方向和垂直方向都平铺

    no-repeat

    背景图片不平铺

    repeat-x

    背景图片水平方向上平铺

    repeat-y

    背景图片垂直方向上平铺

    2.12  background-position设置背景图位置

    属性值

    说明

    left top

    left bottom

    right top

    right bottom

    如果仅指定一个值,其他值将是“center”

    x% y%

    第一个值是水平位置,第二个值是垂直位置。左上角是0% 0%,右下角是100%100%,如果仅指定了一个值,其他值将是50%。默认值为:0% 0%

    xpos ypos

    第一个值是水平位置,第二个值是垂直位置。左上角是0,单位可以是像素(0px 0px)或任何其他CSS单位。如果仅指定了一个值,其他值将是50%。

    inherit

    指定background-position属性设置应该从父元素继承

     

  • 注:设置背景图位置成功的前提是背景框大于图片,即图片在框内(参照物)才可设置位置;
  • 2.13 设置渐变背景

  •  

    div {
         200px; height: 200px; float:left; margin-left: 15px; text-align: center;
    }
    .div1 {
        background: -webkit-linear-gradient(left,black,white)
    }
    .div2 {
        background: -webkit-linear-gradient(left top,black,grey)
    }
    .div3 {
        background: -webkit-linear-gradient(45deg,yellow,gold)
    }
    
    
    
    
    <div class="div1">由左至右</div>
        <div class="div2">由左上至右下</div>
        <div class="div3">45deg方向</div>

    2.14 background-size

  • 调整背景图像的尺寸大小

  • background-size : contain | cover | 100px 100px | 50% 100%;

  • background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
    background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
    background-size :100px 100px; // 调整图片到指定大小;
    background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。
    td {
         200px;
        height: 200px;
        background-image: url("../图片/01.jpg");
        background-size: cover;   /*扩展图片填满元素,实现rowspan=2*/
    }
    
    
    
    <table>
            <tr>
                <td rowspan="2"></td> <!-- 横跨2行 -->
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                
                <td></td>
                <td></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

    2.15 height与line-height区别

  • 都能撑开一个高度,如果一个标签没有定义height属性,其高度由line-height决定,而不是容器内的文字,line-height与height值一样时,实现单行文字的垂直居中。

  • .div1 {
        font-size: 20px;
        line-height: 0;
        border: 2px solid black;
    }
    .div2 {
        line-height: 20px;
        font-size: 0;
        border: 2px solid yellow;
    }
    
    
    
    
    <div class="div1">测试1</div>
            <br>
            <br>
            <div class="div2">测试2</div>
  • 如果一个标签没有定义height属性,其高度由line-height决定,而不是容器内的文字
原文地址:https://www.cnblogs.com/hudaxian/p/14217592.html