HTML + CSS 宝典(五. CSS基础----更多的样式)

html-css024

HTML + CSS 宝典(五. CSS基础----更多的样式),第1张

使用cursor设置

也可以设置图片cursor:url(),图片格式必须为.ico或.cur。

可以用visibility来控制图标或字体的闪烁

img元素是属于HTML的概念

背景图属于css概念

所以img和背景图的使用主要取决于内容

默认情况下,背景图会在横坐标和纵坐标中进行重复

预设值:contain、cover,类似于object-fit

数值或百分比

设置背景图的位置

预设值:left、bottom、right、top、bottom

数值或百分比:数字可以是负数

雪碧图(精灵图)(spirit): 需要小图标合并成一张大图片,大图片就是雪碧图

通常用它控制背景图是否固定。

fixed: 此时背景图是相对于视口的

可能是权重不够, 被#menu2 li i的权重覆盖掉了, 建议 在 .cat1 前增加 #menu2 提高一下权重,

修改后为, 如果.cat1 是li 的class

那么就修改为 #menu2 .cat1 i{} 如果权重还不够, 那么继续增加权重, 如#menu2 li.cat1 i{}

以上代码为猜测, 因为不知道你的html结构, 所以, 请修改一下, 看看效果, 如果还是这样, 再追问我

通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错。

但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案我也是非常的不满意

雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸这里我特指移动端单图的处理,采用的技术很简单CSS3一些知识点