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

背景色.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

);

背景图片

.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;

} */

效果图

精灵图的使用

什么是精灵图？

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

使用精灵图的优点：

1、减少图片的字节；

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

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

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

阿里字体图标引用实战

2.创建项目并添加icon

效果：

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’);

}

第二步：定义使用 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 代码：

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