layer弹框右上角关闭按钮的样式
打开layer右上角的叉号的审查元素,可以看到运用的是CSS 图像精灵(css sprites定位技术),通常是为了减少网页http请求,加快页面加载速度,提高页面的性能(适合小图) 。在这张图片上,真好有符合设计师需要的图标,最后一个蓝色的叉号按钮。需要用到其中之一的叉号按钮,来改变layer弹框右上角关闭按钮的样式,只需要在源代码里面修改一下:需要打开插件css源代码layer.cs...
·
打开layer右上角的叉号的审查元素,可以看到运用的是CSS 图像精灵(css sprites定位技术),通常是为了减少网页http请求,加快页面加载速度,提高页面的性能(适合小图) 。
在这张图片上,真好有符合设计师需要的图标,最后一个蓝色的叉号按钮。
需要用到其中之一的叉号按钮,来改变layer弹框右上角关闭按钮的样式,只需要在源代码里面修改一下:
需要打开插件css源代码layer.css
进行修改即可:
.layui-layer-setwin .layui-layer-close1 {
background-position: -179px -31px;
cursor: pointer
}
.layui-layer-setwin a {
position: absolute;
width: 32px;
height: 40px;
_overflow: hidden;
top: -28px;
}
ok
效果如下
[外链图片转存失败(img-VnjNylR0-1567395439231)(https://upload-images.jianshu.io/upload_images/5640239-48f4ee5e96698d67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
更多推荐
已为社区贡献15条内容
所有评论(0)