html精灵图坐标如何确定,背景设置及精灵图

html精灵图坐标如何确定,背景设置及精灵图背景色.box{width:450px;height:450px;border:1pxsolidaqua;background-color:burlywood;/*背景色默认可以从内边距透出来*/padding:20px;/*控制背景的覆盖范围*/background-clip:content-box;/*渐变*/background:linear-gradient(45deg,re…

大家好,又见面了,我是你们的朋友全栈君。

背景色.box{

width:450px;

height:450px;

border:1pxsolid aqua;

background-color:burlywood;

/* 背景色默认可以从内边距透出来 */

padding:20px;

/* 控制背景的覆盖范围 */

background-clip:content-box;

/* 渐变 */

background:linear-gradient(45deg,red,blue);

background:linear-gradient(

to left,

rgba(255,0,0,0.7),

white,

yellow,

red

);

756ac238aa3391b3248f778ce5834dae.png

背景图片

.box {

width: 300px;

height: 300px;

border: 1px solid aqua;

background-color: burlywood;

/* 背景色默认可以从内边距透出来 */

/* padding: 20px; */

/* 控制背景的覆盖范围 */

background-clip: content-box;

/* 渐变 */

background: linear-gradient(45deg, red, blue);

background: linear-gradient(

to left,

rgba(255, 0, 0, 0.7),

white,

yellow,

red

);

background-image: url(“girl.jpg”);

/* 图片不重复 */

background-repeat: no-repeat;

/* 背景定位 */

/* background-attachment: fixed; */

/* 背景图位置 */

/* background-position: 50px 0px; */

background-position: 50% 50%;

/* background-size: cover; */

/* 阴影 */

box-shadow: 5px 10px 5px red;

/* 圆角 */

border-radius: 160px;

}

/* .box img {

box-shadow: 5px 10px 5px red;

} */

效果图

fc8c0e5b1d080085c8427e01f5d85be5.png

精灵图的使用

什么是精灵图?

CSS Sprite直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”,是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去,再利用CSS的“background-image”,“background-repeat”,“background-position”进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

使用精灵图的优点:

1、减少图片的字节;

2、减少了网页的http请求,从而大大的提高了页面的性能;

3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率;

4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

1072954618ffd7a78ea08fd1aa26e70e.gif

阿里字体图标引用实战

2.创建项目并添加icon

a343911d2f5dc9ce14d97b347daac31e.png

效果:

3.步骤:

Unicode 引用:

第一步:拷贝项目下面生成的 @font-face

@font-face {

font-family: ‘iconfont’;

src: url(‘iconfont.eot’);

src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),

url(‘iconfont.woff2’) format(‘woff2’),

url(‘iconfont.woff’) format(‘woff’),

url(‘iconfont.ttf’) format(‘truetype’),

url(‘iconfont.svg#iconfont’) format(‘svg’);

}

63866f3b68a5926aba45dc4831686194.png

第二步:定义使用 iconfont 的样式

.iconfont {

font-family: “iconfont” !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

第三步:挑选相应图标并获取字体编码,应用于页面

3

font-class 引用:

第一步:引入项目下面生成的 fontclass 代码:

第二步:挑选相应图标并获取类名,应用于页面:

2d32dbc1ebbac9f979ebff8914bde925.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143103.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java官方编译器_JAVA 编译器

    java官方编译器_JAVA 编译器javac做了些什么?说白了,javac就是一个编译器;编译器就是把一种语言规矩转换成另一种语言规矩,也就是将对人友好的语言转换成对机器友好的语言。因此,javac是把Java源代码编译成Java字节码,即JVM可以识别的二进制;表面上就是将.java文件转成.class文件。javac做了些什么?主要由4个模块组成。词法剖析器:识别Java中的if、else、for、while等关键字及其语句的…

  • 华为9月3日或推出麒麟9000;TiDB 3.0.18 发布| 极客头条

    华为9月3日或推出麒麟9000;TiDB 3.0.18 发布| 极客头条「极客头条」——技术人员的新闻圈!CSDN的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧。国内要闻华为9月3日举行IFA活动:推出麒麟9000,Mate40发布时间或确认华为宣布将于德国当地时间9月3日下午14点(北京时间20点)举办IFA2020主题演讲,预计将会推出5nm麒麟90005G处理器,并且公布Mate40系列发布时间。从目前已有的消息来看,麒麟9000处理器基于台积电5nm工艺打造,并集成华为研发的新NPU、5G基带等技术。(新浪科

  • RabbitMq使用demo[通俗易懂]

    RabbitMq使用demo[通俗易懂]1.为什么使用mq2.常见的mq有哪几种3.RabbitMq使用配置4.RabbitMq使用demo4.总结5.参考

  • IDEA 2020.1 最新破解教程,有效期到2089年!

    IDEA 2020.1 最新破解教程,有效期到2089年!

    2020年11月14日
  • windows操作系统定时关机和取消定时关机命令

    windows操作系统定时关机和取消定时关机命令windows操作系统定时关机和取消定时关机命令1、定时关机shutdown-s-t60(60表示定时60秒)2、取消定时关机shutdown-a(取消定时关机)…

  • System.setProperty(),System.setProperty

    System.setProperty(),System.setPropertySystem.getProperties()获得所有的系统变量System.getProperty(“os.name”)获取指定的系统变量(获取系统=windows8.1)System.setProperty(“koow”,”123″)储存在系统变量中,变量名为koow,值为123System.getProperty(“koow”)获取指定的系统变量(获取koow=12

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号