您的位置：首页 > 百科管理 > 详情

css图标素材-如何用css显示一个图片中多个小图标？

原创：找图网 2023-07-13 05:34:17

怎样用CSS给网站title加小图标？

只要在html文件中的<head></head>标签中加上:

实例演示如下:

1、先设置一个及其简陋的页面,代码如下:

此时页面展示如下,可见还未有小图标:

2、在第一步的展示代码上,通过<link rel="icon" href="" type="image/x-icon"/> 添加图标(相对路径为例)。

此时的页面展示效果如下:

扩展资料:

如果希望开发者自己需要制作的一个ico格式的图片,要将图片命名为,像素大小为16*16,所使用的颜色不得超过16色,然后再把放到网站的根目录下。

这样的话浏览器会不停的搜索网站的根目录,只要它一发现了名字叫做这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中。

如何用css显示一个图片中多个小图标？

CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。

先看下面这张300*300的大图片,每个小图标是100*100的。(这张图片名字叫)

首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小,用width和height设置,然后用background-image把背景图片放进去,比如:

.showImage{

width: 100px;

height: 100px;

}

这么设置完毕后,大图片左上角那个小图标(这里假设是100*100的小图标)就出来了。

然后用background-position属性调整背景图片的位置,它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合,但背景图片是可以移动的,由于浏览器坐标系x轴正向右,y轴正向下。所以,背景图片一般需要向左移动,和向上移动,这样移动的值往往都是负的。

比如上面第2张小图标,需要把大图片沿着x方向向左移动100px,y方向不变,设置background-position属性如下:

#item2{

background-position: -100px 0;

}

其他的同理。

最后贴出来一个例子,看明白了这个属性就懂了。

用到的另一张图片名字叫,先贴出来:

代码如下:

<!doctype html>

<head>

<title>背景background-position切图</title>

<style>

.showImage{

width: 100px;

height: 100px;

}

.showImage:hover{

}

ul{

list-style: none;

}

ul li{

float: left;

margin: 20px;

}

#item1{

background-position: 0 0;

}

#item2{

background-position: -100px 0;

}

#item3{

background-position: -200px 0;

}

#item4{

background-position: 0 -100px;

}

#item5{

background-position: -100px -100px;

}

#item6{

background-position: -200px -100px;

}

#item7{

background-position: 0 -200px;

}

#item8{

background-position: -100px -200px;

}

#item9{

background-position: -200px -200px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

这个例子把那个图片打散,横排在页面上,还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。

如何用css显示一个图片中多个小图标？

CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。

首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小,用width和height设置,然后用background-image把

背景图片

放进去,比如:

.showImage{

width: 100px;

height: 100px;

}

然后用background-position属性调整背景图片的位置,它有两个值分别表示背景图片沿着x和y轴移动的距离。

扩展资料

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成,属性是设置的样式属性(style attribute),每个属性都有一个值,属性和值用冒号分隔。CSS 声明总是以分号 ; 结束,声明组以

大括号

{...} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。

CSS 注释是用来解释代码,并且可以随意编辑,浏览器会忽略它。CSS注释以 "/*" 开始,以 "*/" 结束。

当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。