背景图片、图片精灵、overflow元素溢出以及长度单位应用

yeager.chen

于 2022-07-20 20:31:37 发布

阅读量309

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_67444136/article/details/125885559

版权

文章目录

背景图片
图片精灵
overflow元素溢出
长度单位应用

一、背景图片

background-image:设置元素的背景图片

背景图片默认显示的是图片的原始尺寸，如果背景图片大于元素尺寸，则只能显示图片的一部分（左上角）

url（"图片路径"）。

background-image: url(../images/图3.jpg);

注意：

当图片比较小时，默认会以平铺的方式铺满整个背景区域。

平铺：

图片会在水平和垂直两个方向上重复自己，直至背景区域区域填充完整

background-repeat ：设置背景图片是否重复显示。

        background-repeat: no-repeat;

当背景图片的尺寸小于元素尺寸时，背景图片会重复显示直到铺满整个元素。

值：

repeat：默认值，平铺/重复出现

no-repeat：不重复

repeat-x：水平平铺

repeat-y：垂直平铺

space：保持图片的大小平铺满整个背景区域，剩余空间作为图片之间的间隙平分

round：保持图片的完整性，根据背景区域图片相对应拉伸填充。

background-attachment :设置背景图片是否固定。

background-attachment: scroll;

背景图片是否随着页面的其他部分滚动。

值：

scroll：默认值，背景图片会随着滚动条而滚动。

fixed：背景图片不会随着滚动而滚动

background-position:设置背景图像横向和纵向的位置，默认为0，0

background-position: -500px -500px;

设置为50%可以实现居中

background-position: 50% 50%;

background-size:设置背景图片的尺寸，分别表示宽和高

图片的大小仅仅设置一个方向，另一个方向根据图片大小自动缩放。

ackground-size: 100% 100%;

值：

contain：估计容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在容器之内，容器范围可能不被完全占用

cover:根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器

-数值：第一个值为X轴（宽度），第二个值为Y轴（高度）。

单位：

px ：像素，固定的大小

%：百分比，以容器的大小作为标准进行计算。

-值为一个：该值将作用于X轴（宽度）位置，高度为auto，此时他的背景图片以X轴作为参考进行比例缩放。

二、图片精灵

CSS SCRIPT:css图片精灵或雪碧图

什么是精灵图片：

精灵图片就是将多张图片放置到一张大的图片上面。

精灵图片主要是当做背景图片插入。

为了有效的减少服务器接收和发生请求的次数，提高页面的加载速度。减轻服务器压力。

三、图片内容溢出

当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容仍然会显示。

overflow:设置元素溢出部分内容的显示方式，默认为显示。

值：

visible：默认值：内容不会被隐藏，溢出内容显示在元素之外

hidden：溢出的部分不显示

scroll：溢出的内容可以滚动查看

auto：隐藏溢出内容，出现滚动条

overflow: hidden;
overflow: scroll;
overflow: visible;
overflow: auto;

overflow-x: 设置水平方向溢出内容的显示方式

overflow-y: 设置垂直方向溢出内容的显示方式

text-overflow: ellipsis;文本溢出以省略号...为后缀

white-space:nowrap; 文本不换行

resize：允许用户跳转元素的大小。

值：

none：默认值，不能调整元素的大小

horizontal：允许用户调整元素的宽度

vertical：允许用户调整元素的高度

both：允许用户调整元素的宽高

resize: both;

四、长度单位

<style>
      #px {
        font-size: 30px;
      }
      #em {
        font-size: 2em;
      }
      #vw {
        font-size: 2vw;
      }
      #vh {
        font-size: 2vh;
      }
      #cm {
        font-size: 2cm;
      }
      #mm {
        font-size: 10mm;
      }
      #pt {
        font-size: 30pt;
      }
    </style>
<body>
    <p id="px">px，表示像素，1px相当于屏幕上最小的一个显示单位</p>
    <p id="em">em，表示当前元素父元素的字体大小。</p>
    <p id="rem">rem,表示当前根元素的字体大小</p>
    <p id="vw">1vw表示浏览器窗口宽度的1%</p>
    <p id="vh">1vh表示浏览器窗口高度的1%</p>
    <p id="cm">厘米</p>
    <p id="mm">毫米</p>
    <p id="pt">磅</p>
  </body>