图片及元素内容溢出的心得体会

最新推荐文章于 2024-07-12 16:27:40 发布

AG。

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量220

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/zjt200013/article/details/125898724

版权

背景图片

background-repeat

background-attachment

背景图片

background-image:设置元素的背景图片，url（“图片路径”）。当图片比较小的时候，默认会以平铺的方式铺满整个背景区域。即图片会在水平和垂直两个方向上重复出现，直至背景区域填充完整。

background-repeat

通常情况下常用的值有background-repeat: no-repeat：设置背景图片是否重复显示。当背景图片的尺寸小于元素尺寸时，背景图片会重复显示，直到铺满整个元素。除此之外，一些常用的值如下所示：

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

repeat-x：水平平铺。

repeat-y：垂直平铺。

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

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

background-attachment

常见的值有fixed，含义是设置背景图片是否固定。背景图片是否随着页面的其他部分滚动。此外，其默认值是 scroll：默认值：背景图片会随着滚动而滚动。

background-position

图片的定位，设置背景横向和纵向的位置，默认为0 0。当设置为50% 50%时，可以实现图片的居中： background-position: 50% 50%;

background-size

设置背景图片的尺寸，分别表示宽和高。图片的大小仅仅设置一个方向，另一个方向根据图片的大小自动缩放。他的值常见的有：

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

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

除了常见的一些值以外，也可以是数值，第一个值为x轴（宽度），第二个值为Y轴（高度）。

px：像素，固定的大小。

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

图片精灵

什么是图片精灵？精灵图片就是将多张图片放置到一张大的图片上面。主要是当作背景图片插入。为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。减轻服务器的压力。就拿下图举一个例子：

这就是一个中规中矩的精灵图，背景图片的大小是1010*1010，每行或者每列7/1010=144px

首先，先在body写几个标签。

<body>

         <section></section>
         <section></section>
         <section></section>
         <section></section>
         <section></section>
         <section></section>
         <section></section>

        
</body>

因为图片精灵的宽高为1010*1010 ，每行或者每列7/1010=144px 并且为他加个边框，代码图如下：

    <style>
        section{
           
            width: 144px;
            height: 144px;
            border: 5px solid;
            background-image: url(./icons.jpg);
            margin: 30px auto;
        }
    </style>

部分效果图如图所示：

图片精灵的两种计算方法

一种是像素，另一种是百分比计算方法，如上图，图片每行每列都是7个，自己设置一个宽高，并且使background-size的宽高是自己设置宽高的7倍或者是700%。最后用background-position对图片进行定位。

图片精灵的定位前者的值是从左往右，后者的值是从上往下，从0开始作为第一个开始数，其前后值都为负的，当从右往左，从下往上数时，是从1开始，其值为正数。

以铃铛图片作为一个例子，代码如下：

section:nth-of-type(4){
            /* 铃铛 */
            width: 157px;
            height: 157px;
            /* background-size: 700% 700%; */
            /* background-position: -100% -200%; */
            /* background-size: 700% 700%; */
            /* background-position:600% 500%; */
            /* background-size:1099px 1099px; */
            /* background-position: -157px -314px; */
            background-size: 1099px 1099px;
            background-position: 942px 785px;


        }

元素溢出

元素溢出是当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容仍会显示。 overflow：设置元素溢出部分内容的显示方式，默认为显示。常见的值有：

hidden：溢出的部分不显示。

scroll:溢出的部分可以滚动查看。

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

visible：默认值：内容不会被隐藏，溢出的内容出现在元素大小之外。

此外，overflow-x:设置水平方向溢出内容的显示方式。overflow-y：设置垂直方向溢出内容的显示方式。平时我们也会遇到一些比较长篇的文字，通常我们会用text-overflow：ellipsis，对文本溢出部分以省略号...为后缀进行隐藏

resize：允许用户调整元素的大小。

常用的值有：

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

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

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

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

AG。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片及元素内容溢出的心得体会

一种是像素，另一种是百分比计算方法，如上图，图片每行每列都是7个，自己设置一个宽高，并且使background-size的宽高是自己设置宽高的7倍或者是700%。图片精灵的定位前者的值是从左往右，后者的值是从上往下，从0开始作为第一个开始数，其前后值都为负的，当从右往左，从下往上数时，是从1开始，其值为正数。元素溢出是当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容仍会显示。根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器。...
复制链接

扫一扫