layui 让div变成圆圈透明

layui透明弹框

效果: layui.use('layer', function () { var layer = layui.layer; var str = '<div>'; str += '<div style="margin-left: 0%;margin-top: 3%;"><img src="<%templateskin%>/images/play-pause.png" style="width:38%;height:3

CSS实现DIV层背景透明而文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

html学习笔记（一）div的透明设置

要使得div的透明度设置,有两种方法. 第一种:使用opacity属性,单词的意思是不透明性,你可以设置它的值,范围是0到1,1为不透明,0为全透明.具体使用如下: css代码: #div01{ background:#FFF; width:500px; height:500px; opacity:0.5; } body里面的代码: <div id="div01"> asdasjdkahsdkahdklashdlksa </div> 图片效果如下: 注意

layui topbar图标（即返回顶部）未显示的解决方法

在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这两处dom替换成$('.layui-body')即可解决.位置如下图: 接着又出现了另一个问题,那就是返回顶部的功能失效了,看来还是没绑定到事件,于是将下图中的代码也替换掉即可: 顺便附上html中body代码: <body class="layui-layout-body">

解决css设置背景透明，文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

css实现背景透明文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

layui时间控件联动：开始时间、结束时间，有效时间范围

实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防: 这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下,云测试Bug,hhh): @Styles.Render("~/Content/layuiadmin/layui/css/layui.css") @Styles.Render("~/Content/layuiadmin/style/admin.css?v=1") @Sc

ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效

ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"> <div class="red-paper"> <img class="company-uk-packet" src="./images/uk-bag.png" alt=""> </div&g

layui表格参数

layui表格对数据进行用table样式展现举个例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>layui表格div容器</title> </head> <body> <div id="container"></div> </body> </html

记一次Layui分页

分享一个自己画div的技巧

分享一个自己画div的技巧笔者是小白,前端不是很懂.现在想总结下自己画div布局的小技巧和思路. 先对着设计图把div给好好框选出来我个人觉得这一步是很重要的,要先分析大局,再细节处理.一定要先决定好大体路线再具体实现.并且将想法画出来有利于回忆,不会走一步算一步.我相信很多人都是写着写着都忘了之前想好的路线是什么,又要花费时间取回忆.既然开发步骤复杂,那为何不去尝试一下记录一下呢? 先找包裹得最大的div,再往每个div里布局内部的div 总的来说就是由浅入深,先把大框架写了,再添加小零件

layui框架图片上传至服务器

注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="layui-form-item"> <div class="layui-input-block">  <button type="button" class="layui-btn"

CSS魔法（二）

# 文档类型<!DOCTYPE> <!DOCTYPE html> # 字符集 <meta charset="UTF-8" /> # 换行标签 <br /> # div span标签后代选择器子代选择器 > 交集选择器 div.one{ } 并集选择器行内元素和块级元素的区别块级元素:独占一行能设置大小行内元素:不能设置大小 display:inline-block可将行内元素转为块级元素行高 line-heig

js轮播图和bootstrap中的轮播图

js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 800px; height: 300px; position: relative; overflow: hidde

less 经典范例 bootstrap 的 less 版本常用 less 代码

1. bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins // 引入变量和mixin函数 @impo

从天猫和支付宝身上学习opcity与rgba

不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现呢? 略微了解一点布局和CSS的人可能会给出这样的答案:(*下面这段布局是错误的) <div class="background-opacity"> <div class="panel-opacity"> <div>登录框内容<

CSS补充与JavaScript基础

一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 left: 0; 距离左边0像素 top: 0; 距离上边0像素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

css Animation初体验

目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中我会向你介绍CSS动画:随着浏览器支持性的提高已经变得越来越流行了,css动画在做一些事情上有很高的性能.在涵盖了基础知识后,我们将建一个快速的例子:矩形变成圆形的动画. 演示看这里 @keyframes和动画介绍 css动画的主要组件:@keyframes,创建动画的css规则.把@keyfra

使用CSS3各个属性实现小人的动画

使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> <title>练习一个小人的动画</title> <lin

html5移动端制作知识点总结

一.测试工具:1.Chrome 2.Opera Mobile二.分辨率:一般现代手机最小320px,最大640px.三.全屏流体设计: 1.腾讯新闻:http://xw.qq.com/ 2.途牛旅游:http://m.tuniu.com/ 固屏类流体设计 1.京东商城:http://m.jd.com/ 2.淘宝网:http://m.taobao.com/(全屏+固屏,导航一般用全屏) 四.<meta>标签,放在<head>之间<meta name="viewport

CSS有用的代码片段

1.垂直对齐 .vc{ position:relative; top:50%; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } 2.只在一侧或者两侧具有投影 .box-shadow{ background-color:#AC92EC; width:160px; height:90px; margin-top:-45px; margin-left:-80

layui 让div变成圆圈透明

热门专题