default
menu home
Icon library Sign up Login favorite_border message help_outline

- Online notes-CSS-page1

styleTags:  All CSS html javascript php/other IT
Demo subject CSS背景图片分割之大图小用

为了提高页面加载速度,我们往往需要把一些小图标合并成一个图片文件,然后采用图片分割的方法来呈现,这很容易实现,使用background-position来设定图片的起始位置即可。

到了当今手机时代,随着屏幕尺寸的千变万化,图片分割又会遇到一个新问题:就是图片分辨率的问题,一般图标文件的实际大小为:16x16, 24x24, 32x32, 48x48。按原始大小呈现,有时候图片就会显得模糊,不清晰。这时,假如我们使用“大图小用”的方法,就会取得比较好的效果。比如一个图标,想呈现的大小为24x24,我们可以实际使用一张64x64或者128x128的图片,然后设定{width:24px;height:24px;},这样来强迫浏览器显示成24x24的图片,从而使得图片显示得更为清晰,效果更佳。

单张图片好办,但是假如我们想继续沿用图片分割的方法来实现呢?下面就给大家展示一个实际的例子:

原图:1280x128,每个图标都是128x128,空白部分是留着扩展用。
[img]

如果我们要显示为24x24的单个图标,可以参考以下css代码:
background-size之所以是1000%,是因为单个图片宽度是整个图片宽度的10%,因此反过来,背景图片的宽度就应该是10倍关系。

点击页面红色“演示”按钮查看效果。

by: fanshome  visibility 1886
2023-07-26 09:35 (UTC)

Demo subject 无法明确指定大图的宽度width和height时,如何避免累计布局位移CLS?

累计布局偏移: Cumulative Layout Shift, 简称CLS,是一项web性能的重要指标,旨在避免页面渲染时,某些元素(比如图片、字体等)加载前后占位不同导致页面呈现的内容发生突然变化,降低用户使用感受。比如图片未加载前,原来是某个链接的位置,突然被加载后的图片取代,页面发生了“跳动”,用户点下去的时候就不一定是用户想要的去处。

但是,某些情况下,我们又无法直接明确指定图片的宽度和高度,比如为了自适应不同的屏幕大小,我们需要图片按屏幕宽度的百分比来呈现,这时候,就无法简单地直接明示图片的宽/高。一旦不指定图片的宽/高,那么我们就容易遇到CLS问题,因为浏览器在读取图片并加载前,不知道该预留多大位置给图片。

那么我们如何避免这个两难的局面呢?

一种比较简单的做法是给图片加上一个包围元素,指定这个包围元素的宽高比,比如宽度80%,高度40%(根据图片的宽高比计算得出),与图片的实际宽高比一致。然后把图片放入其中,指定图片宽度100%。这样,浏览器就会预留相应的并且正确的图片位置,从而避免CLS问题。

下面我们以一张大图(1920*1080,16:9)为例,演示如何具体实现。(点击页面红色“演示”按钮查看效果)

by: fanshome  visibility 1903
2023-07-26 09:32 (UTC)

Demo subject 使用CSS让大背景图片适应不同大小屏幕又一例

这个示例网页使用了一个较大的背景图片,并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于或等于768像素的屏幕上,字体大小和位置也会进行相应的调整。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1948
2023-06-03 06:06 (UTC)

Demo subject 一个使用CSS/HTML将图像自适应屏幕的示例

在这个示例中,我们将图像的最大宽度设置为100%,并将高度设置为自动。此外,我们还添加了一个样式,以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放,不会失真或拉伸。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1897
2023-06-03 06:06 (UTC)

Demo subject 网页图片CSS进阶篇——优化图片,提升网页加载速度

说到提升网页中图片加载速度,一般立即想到的是给图片瘦身,比如减小图片尺寸,或者通过工具降低图片文件大小,比如png图片,可以利用在线压缩PNG图片网页工具,一般可以减少50%~60%的图片体积,基本保持图片显示质量不变。

现在,除了以往常见的jpg/png图片格式外,webp和avif是更优秀的图片压缩格式,现代浏览器大都已经支持,它可以在jpeg图片基础上进一步减少图片文件体积,并且保持相当优秀的图片质量。比如普通jpeg文件,以可接受同等图片质量为前提,转换成webp可以平均减少约30%左右体积,使用avif格式可以比jpeg平均降低约50%左右体积。webp和avif相比较,建议大家选用avif,因为webp是谷歌家的,avif是免费开源的。

这里推荐一个不错的在线jpg转avif工具网站。

以上所述,减少图片文件物理体积,只是提升网页加载速度的手段之一,还有没有其它方法呢?

当然是有,在某些特定场景下,图片文件本身已经确定是经过优化,但是由于某些原因,浏览器在对页面进行渲染时,却因为不知道图片的具体尺寸,导致渲染后的页面内容位置调整,从而带来额外的时间消耗。

具体来说,例如页面需要展示一张大图片,所谓大图片,是相对小尺寸的图片比如图标、头像、按钮之类,那种基本上占满整个页面宽度的图片,如果想做pc端和移动端自适应网页,就比较麻烦,因为你不能直接指定具体的图片宽度和高度(反正我水平不够,没有找到办法),这个时候,浏览器在渲染页面基本框架时,由于不知道图片的宽高,一般都直接先无视,不安排预留位置,导致等图片文件读取完毕开始显示的时候,造成页面内容的跳动。一方面给用户造成不适,另一方面由于需要重新渲染页面的其余受影响部分,造成页面整体加载时间的增加。

那么我们要如何做呢?可以采用背景图片的方法,因为背景图片可以很方便的按屏幕宽度的百分比指定显示比例,从而使得图片无论在pc的大屏幕上还是手机等移动终端的小屏幕上,都能比较得体的展示。具体做法就是先指定图片要显示的宽度占屏幕宽度的百分比,比如80%、90%等,然后指定图片的宽高比,从而让浏览器知道渲染图片的时候需要预留多大的位置给图片,这样,就避免了图片加载后页面的跳动。

下面以一张大图片为例(1920x1080),avif格式文件只有17.7kB,我们来看看css到底如何实现自适应屏幕。
点击演示按钮看实际效果。

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

by: fanshome  visibility 1923
2023-06-03 06:07 (UTC)

Demo subject CSS学习笔记:flex布局做出元素两端对齐效果

很久以前,还没有flex布局方法的时候,想要在同一行内的两个元素分两端左右对齐,应该使用float方法,左边的元素使用float:left; 右边的元素使用float:right;。

现在,flex布局大行其道,要想达到同样的目的,理论上使用flex的方法效果应该更好。

简单记录一下备用。

by: fanshome  visibility 2390
2023-05-28 06:45 (UTC)

Demo subject CSS学习心得:多行文本两端对齐,同时溢出部分自动截断并添加省略号...

在卡片列表式页面展示文章内容时,除文章标题外,经常需要显示文章简介。简单粗暴的做法就是只显示文章的开始部分内容,这时就会要求简介部分固定高度,不能超出,同时尤其是中文,不能轻易使用字符串截断,最好是能够使用CSS来截断,同时添加省略号...,以便在不同屏幕上,卡片宽度自适应的同时,简介部分的内容也实现自适应。

注意:-webkit-line-clamp 不规范的CSS属性,使用时请注意有浏览器兼容性问题。

另外,如果是单行文本截断并加省略号的话,要加white-space: nowrap;

by: fanshome  visibility 1768
2023-06-05 08:01 (UTC)

subject MDUI前端框架,表格头position: sticky无效的问题

MDUI前端框架不错,很漂亮、灵活,用起来能省不少时间。

但是有些时候,它也会引入一些意想不到的问题:比如我想做一个统计表格,统计一大堆数据,然后希望页面滚动的时候,表格头部能固定在页面顶端,方便查看数据。本来,这个功能实现起来很简单,css里写上:thead tr{position:sticky;top:60px;} 就能解决问题了。

然而,使用了MDUI的css框架后,预期的效果没有出现,表格头随着滚动一起和表格内容一样被消失了。上网搜索了一堆文章,检查了表格的父容器属性等等,都没有效果。最后没招,使用排除法,确认问题出在MDUI框架的”mdui-table-fluid“样式上,overflow-x:auto这句导致了position: sticky不生效。

本来,使用mdui-table-fluid样式是为了在手机上查看表格时,横向宽度不够,可以用手指左右拖动表格来查看完整内容,非常方便。谁知道会影响sticky属性能。

发现了问题,解决起来就容易了:
@media (min-width:1024px){.mdui-table-fluid{overflow-x:initial;}}

这样,在PC上再查看表格的时候,表格头可以固定住了,手机上不受影响,继续可以左右拖动,完美!

by: fanshome  visibility 1923
2023-05-24 08:27 (UTC)

Demo subject 几种CSS字体描边和阴影效果

基本方法:
1、-weblit-text-strok:字体描边,非标准方法,浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身,属于在字体内部描出边界,所以字体完全不走样。
2、text-shadow:字体阴影,符合标准规范,现代浏览器普遍支持。重点:可以用重复多次不同偏移量阴影来实现描边效果。但是假如用这种方法来做纯包围式描边(不模糊blur)的话,效果不完美,如果描边宽度比较大的话,斜边的尖角部分会出现“锯齿、缺角”等。

语法:{text-shadow: h-shadow v-shadow blur color;}
4个参数分别表示:水平偏移、垂直偏移、模糊(扩散)、描边的颜色。

我们可以根据实际需要选择,效果如下图:
[img]

by: fanshome  visibility 3499
2023-05-29 14:57 (UTC)