关于什么是html中的图像（详细解释）

吾覭
337 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

图像

图像元素

HTML <img> 元素在 HTML 页面中表示一个图像，用来引入 HTML 页面外部的一张图片。

<img style="width: 500px;height: auto;" src="files/图片.jpg" alt="图片">
  • src 属性：必选项，用来设置一张图片的路径。该路径可以是绝对路径，也可以是相对路径。
  • alt 属性：可选项，用来定义了描述图像的替换文本。当浏览器无法正常显示指定图片时，会显示该属性值的内容。

背景图像

背景图像主要是指 CSS 中有关 background 属性的相关内容，该属性是一个简写形式，该属性可以拆分为如下几个 CSS 属性：

  • background-image 属性

    CSS background-image 属性用来在 HTML 元素设置一张背景图像或多张背景图像。

    • none：该关键字表示没有背景图像。

      如果设置的图像无法正确加载显示，浏览器会将此情况等同于其值设置为 none（表示无背景图像）。

    • url(path) 函数：用来引入要显示的背景图像的路径。

      支持多背景图像。使用多个 url() 函数引入背景图像，并且 url() 函数之间使用逗号（,）进行分隔。

  • background-repeat 属性

    CSS background-repeat 属性用来设置背景图像的重复方式。

    • repeat：图像同时在水平方向和垂直方向进行重复。如果最后一个图像无法显示完整，则会被剪裁。

    • no-repeat：图像在水平方向和垂直方向都不会重复。

    • space：图像同时在水平方向和垂直方向进行重复。第一个重复的图像和最后一个重复的图像会被固定在元素的边缘，同时空白间隙会均匀地分布在重复的图像之间。

    • round：跟随浏览器窗口的尺寸增长，重复的图像会被拉伸（重复的图像之间不存在空白间隙）以铺满整个浏览器窗口。

      单值等价于双值
      repeat-xrepeat no-repeat
      repeat-yno-repeat repeat
      repeatrepeat repeat
      spacespace space
      roundround round
      no-repeatno-repeat no-repeat

  • background-position 属性

    CSS background-position 属性用来设置背景图像在 HTML 页面中的初始位置。

    • 关键字：center、left、right、top 和 bottom，分别表示居中、左边、右边、顶部和底部。
    • 长度值：绝对长度值和相对长度值都可以使用。
    • 百分比值

    由于设置的位置同时存在水平方式和垂直方向，所以 background-position 属性的值是两个：

    • 第一个值：表示设置在水平方向的位置。
    • 第二个值：表示设置在垂直方向的位置。

  • background-size 属性

    CSS background-size 属性用来设置背景图像在 HTML 页面中的显示大小。

    • cover：缩放背景图像以完全覆盖背景区，可能背景图像部分看不见。
    • contain：缩放背景图像以完全装入背景区，可能背景区部分空白。
    • 一个值：表示设置背景图像的宽度为这个值，而高度值为 auto。
    • 两个值：第一个值表示设置背景图像的宽度，第二个值表示设置背景图像的高度。

  • background-attachment 属性

    CSS background-attachment 属性用来设置背景图像的位置是在视口内固定的，还是跟随所在的元素区域滚动。称为背景关联。

    • fixed：表示背景图像相对于视口固定。即使一个元素拥有滚动机制，背景图像也不会随着元素的内容滚动。
    • local：表示背景图像相对于元素的内容固定。如果一个元素拥有滚动机制，背景图像将会随着元素的内容滚动， 并且背景图像的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
    • scroll：示背景图像相对于元素本身固定， 而不是随着元素的内容滚动，但对元素边框是有效的。

background 属性

CSS background 属性是一个简写属性，用来一次性集中设置各种有关背景的属性。该属性可以用来设置一个或多个属性，其中包含 background-color 属性、background-image 属性、background-position 属性、background-repeat 属性、background-size 属性和background-attachment 属性。

精灵图

CSS 中的精灵图又称为雪碧图，应用在使用了众多小图标的网站中。

   <style>
        body {
            background-color: rgb(95, 77, 77);
        }
​
        .cart{
            width: 25px;
            height: 20px;
            background-image: url(files/toolbars.png);
            background-repeat: no-repeat;
            background-position: -55px -55px;
​
        }
    </style>
</head>
<body>
    <div class="cart"></div>
</body
  • <div> 元素通过 CSS 的 width 和 height 属性设置显示的区域大小25px*20px。
  • 通过 CSS 的 background-image 属性为 <div> 元素引入背景图像，并设置为不重复显示。
  • 通过 CSS 的 background-position 属性设置背景图像显示的位置(向右向上移动55px)，以达到显示想要显示的图标。
avatar
文章
阅读
粉丝