V。on
V。on

filter及backdrop-filter属性详解

filter属性详解

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。作用于元素本身
backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素。它最常用的功能就是毛玻璃效果。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

下面运用一个例子来对比效果：

  • filter
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .container { width: 850px; }
        img { width: 200px; height: 200px; }
        .none { filter: none; }
        /* 给图像设置高斯模糊, 值越大越模糊, 不接受百分比值 */
        .blur { filter: blur(4px); }
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness { filter: brightness(0.3); }
        /* 调整图像的对比度 */
        .contrast { filter: contrast(180%); }
        /* 将图像转换为灰度图像 */
        .grayscale { filter: grayscale(100%); }
        /* 给图像应用色相旋转, 该值虽然没有最大值，超过360deg的值相当于又绕一圈 */
        .huerotate { filter: hue-rotate(180deg); }
        /* 反转输入图像 */
        .invert { filter: invert(100%); }
        /* 转化图像的透明程度 */
        .opacity { filter: opacity(50%); }
        /* 转换图像饱和度 */
        .saturate { filter: saturate(7); }
        /* 将图像转换为深褐色 */
        .sepia { filter: sepia(100%); }
        /* 给图像设置阴影 */
        .shadow { filter: drop-shadow(8px 8px 10px green); }
    style>
head>
<body>
    <div class="container">
        <img src="./1.png" class="none">
        <img src="./1.png" class="blur">
        <img src="./1.png" class="brightness">
        <img src="./1.png" class="contrast">
        <img src="./1.png" class="grayscale">
        <img src="./1.png" class="huerotate">
        <img src="./1.png" class="invert">
        <img src="./1.png" class="opacity">
        <img src="./1.png" class="saturate">
        <img src="./1.png" class="sepia">
        <img src="./1.png" class="shadow">
    div>
body>
html>

效果如下图：
filter及backdrop-filter属性详解_第1张图片

  • backdrop-filter
    它在写法上略有不同，不能直接作用于元素。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
            width: 850px;
        }
        .container {
            width: 200px;
            height: 200px;
            display: inline-block;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            position: relative;
            background: url(./1.png);
            background-size: 100% 100%;
        }
        .container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
        .blur::before { backdrop-filter: blur(4px); }
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness::before { backdrop-filter: brightness(0.3); }
        /* 调整图像的对比度 */
        .contrast::before { backdrop-filter: contrast(180%); }
        /* 将图像转换为灰度图像 */
        .grayscale::before { backdrop-filter: grayscale(100%); }
        /* 给图像应用色相旋转, 该值虽然没有最大值，超过360deg的值相当于又绕一圈 */
        .huerotate::before { backdrop-filter: hue-rotate(180deg); }
        /* 反转输入图像 */
        .invert::before { backdrop-filter: invert(100%); }
        /* 转化图像的透明程度 */
        .opacity::before { backdrop-filter: opacity(50%); }
        /* 转换图像饱和度 */
        .saturate::before { backdrop-filter: saturate(7); }
        /* 将图像转换为深褐色 */
        .sepia::before { backdrop-filter: sepia(100%); }
        /* 给图像设置阴影 */
        .shadow::before { backdrop-filter: drop-shadow(8px 8px 10px green); }
    style>
head>
<body>
    <div class="container none">nonediv>
    <div class="container blur">blurdiv>
    <div class="container brightness">brightnessdiv>
    <div class="container contrast">contrastdiv>
    <div class="container grayscale">grayscalediv>
    <div class="container huerotate">huerotatediv>
    <div class="container invert">invertdiv>
    <div class="container opacity">opacitydiv>
    <div class="container saturate">saturatediv>
    <div class="container sepia">sepiadiv>
    <div class="container shadow">shadowdiv>
body>
html>

效果如下图：
filter及backdrop-filter属性详解_第2张图片

那么我们再写一个例子来谈谈filter以及backdrop-filter的不同：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .container {
            width: 800px;
            height: 400px;
            background: url(./2.png) no-repeat;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .container > div {
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, .7);
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }
        .filter {
            filter: blur(6px);
        }
        .backdrop-filter {
            backdrop-filter: blur(6px);
        }
    style>
head>
<body>
    <div class="container">
        <div>Normaldiv>
        <div class="filter">filterdiv>
        <div class="backdrop-filter">backdrop-filterdiv>
    div>
body>
html>

效果如下：
filter及backdrop-filter属性详解_第3张图片
所以，filter 作用于当前元素，并且它的后代元素也会继承这个属性；backdrop-filter 作用于元素背后的所有元素。

  • 复合函数：使用多个滤镜，每个滤镜使用空格分隔。

tips: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        img { width: 200px; height: 200px; }
        .none { filter: none; }
        /* backdrop-filter也是一样的 */
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness { filter: brightness(150%); }
        /* 调整图像的对比度 */
        .contrast { filter: contrast(200%); }
        .more1 { filter: contrast(200%) brightness(150%); }
        .more2 { filter: brightness(150%) contrast(200%); }
    style>
head>
<body>
    <div class="container">
        <img src="./1.png" class="none">
        <img src="./1.png" class="brightness">
        <img src="./1.png" class="contrast">
        <img src="./1.png" class="more1">
        <img src="./1.png" class="more2">
    div>
body>
html>

filter及backdrop-filter属性详解_第4张图片
最后，有两个他们的相同点，同样也是需要注意的点：

使用了 filter 和 backdrop-filter 的元素（值不为 none）会使 CSS 3D 失效
使用了 filter 和 backdrop-filter 的元素（值不为 none）会使内部的 fixed 定位失效

你可能感兴趣的:(css,前端)

  • 七个合法学习黑客技术的平台，让你从萌新成为大佬 黑客白帽子黑爷 学习php开发语言web安全网络
    href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
  • html如何使多张图片滑动不卡顿,Web端大量图片同时加载卡顿问题的优化方案 kisserkook
    案例由于业务的需要，需求方需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，可能会遇到很多的坑，这里小编也总结了一些优化方案，我们可以一起来看看。具体场景在描述如何解决问题，我们现在先来申明，问题是什么？需求的主要内容是在某个页面显示1~1000张，200~500k大小的图。好消息是这些图片来源于本地硬盘而非网络。(否则这个问题就要变成优化网络....)踩坑历程由于不是纯前端的项目，笔者
  • 计算机学习建议 qincjun 学习
    对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去
  • CSS预处理器 augenstern416 css前端
    CSS预处理器是一种扩展了CSS功能的脚本语言，它允许开发者以编程的方式编写更加干净、结构化的CSS代码。以下是关于CSS预处理器的详细解释：一、CSS预处理器的特点与优势变量：允许在CSS中定义变量，并在整个样式表中重复使用。有助于减少重复代码，提高代码的可维护性。嵌套规则：支持CSS选择器的嵌套，使得代码结构更加清晰，易于理解和维护。可以通过嵌套来组织选择器，避免层叠带来的复杂性。混合（Mix
  • Flex布局 augenstern416 CSScss
    Flex布局，即FlexibleBox布局，是一种CSS布局方式，它为盒状模型提供了最大的灵活性。以下是对Flex布局的详细介绍：一、基本概念Flex容器（flexcontainer）：采用Flex布局的元素称为Flex容器，简称容器。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称项目。主轴（mainaxis）和交叉轴（crossaxis）：容器默认存在两根轴，水平的主
  • RK3588+昇腾AI｜40TOPS算力AI盒子设计方案 ARM+FPGA+AI工业主板定制专家 AI盒子瑞芯微人工智能
    综合视频智能AI分析系统介绍以计算机视觉技术为基础，AI赋能千行百业，依托人工智能视觉分析技术以及强大的“端+边”算力支撑，实时分析烟火，入侵等事件，同时结合云上预警业务平台，实现事件发现、预警、处置全流程闭环。设计架构系统架构视频智能识别系统自下而上分为“感知层、网络层、支撑层、应用层”四层，系统逻辑架构如下图所示：感知层对接前端感知设备，如视频监控、NVR、和其他物联感知设备，对重要通道和场所
  • 前端优化可以从哪些方面下手及优化方案 光影少年 前端性能优化
    前端优化是提升网页性能、提升用户体验和降低服务器负担的重要手段。可以从多个角度入手，以下是一些常见的优化方向和方案：1.性能优化减少请求数量：尽量减少页面加载时发起的HTTP请求，例如使用合并文件（CSS和JS）、减少图片的请求。使用懒加载（LazyLoading）：对于图片、视频或组件，可以采用懒加载的方式，只有当用户需要时才加载。代码拆分（CodeSplitting）：使用Webpack或类似
  • 用vue3写一个好看的wiki前端页面 云浩舟 前端vue.jsjavascript
    以下是一个使用Vue3+ElementPlus实现的Wiki风格前端页面示例，包含现代设计、响应式布局和常用功能：TechWiki开发文档快速开始API参考部署指南数据分析数据规范可视化指南{{currentDoc.title}}草稿import{ref,reactive,computed}from'vue'import{marked}from'marked'importDOMPurifyfrom
  • Flask应用示例 诚信爱国敬业友善 Flaskflaskpython后端
    以下是一个带有登录界面和主页的Flask示例项目，采用清晰的项目结构，符合规范，并包含全面的代码示例：项目结构my_flask_app/├──app/│├──__init__.py│├──forms.py│├──models.py│├──templates/││├──base.html││├──index.html││├──login.html│├──static/││├──style.css│└
  • 分享一些处理复杂HTML结构的经验 数据小爬虫@ html前端
    在处理复杂HTML结构时，尤其是使用Java爬虫和Jsoup进行数据抓取时，以下是一些实用的经验和技巧，可以帮助你更高效地解析和提取数据：1.缩小解析范围对于复杂的HTML结构，尽量缩小解析范围，只解析所需的元素。使用CSS选择器来定位所需的元素，而不是对整个文档进行解析。2.使用Jsoup的选择器功能Jsoup提供了强大的选择器功能，可以用来处理嵌套的DOM元素。例如，你可以使用select方法
  • swagger使用指引 MA_Y_ swagger
    1.swagger介绍在前后端分离开发中通常由后端程序员设计接口，完成后需要编写接口文档，最后将文档交给前端工程师，前端工程师参考文档进行开发。可以通过一些工具快速生成接口文档，本项目通过Swagger生成接口在线文档。什么是Swagger？OpenAPI规范（OpenAPISpecification简称OAS）是Linux基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来
  • 前端面试题常考汇总1 RayFars 前端
    JS部分1.解释JavaScript中的闭包，并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外执行。应用场景：数据隐藏：通过闭包，可以创建私有变量，只通过特定的函数来访问和修改这些变量。回调函数和事件处理：闭包常用于设置回调函数，因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • CSS动画与变形 玲玲酱 #CSS3前端html5css3
    CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任
  • CSS3动画属性：转换(transition) 前端独秀 前端css3transition
    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
  • 【瀑布流插件】vue-masonry 春晓_春眠花落 vue.jsjavascript前端
    **最近一直在画静态页面，有个图片列表，布局很紧凑，图片宽度一样，高度不一样，但是效果图上都是紧挨在一起，我用普通的v-for循环加css布局，它会以这一行最高的那张图片的高度为准，导致图片高度小的，下一行不能紧挨在一起**如图：但是我要的效果是这样的，如图：依靠vue-masonry，实现了一些简单的功能,可参考这篇文章，讲的比较详细《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
  • 本地部署model scope魔搭大模型流程 CQller python算法深度学习机器学习jupyterpytorch
    一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来
  • springboot项目配置https 愿企鹅飞（｡ò ∀ ó｡） Javajavatomcatjarspringeclipse
    1，必须去服务商购买一个ssl证书。2，以我想的是这个域名的8080端口当前端，8070当后端，3，前端配置简单直接去下载nginx证书把里面的key和证书粘到对应位置即可（用宝塔简单）4.springboot后端服务（下载Tomcat证书）按照这个方法https://blog.csdn.net/baidu_37302589/article/details/100692957配置端口配置成我需要的
  • java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ... weixin_34383618 java前端后端ViewUI
    导读：主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用一：封装背景像easyui之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL,以及设置URL反回来的值和select的text，和value的对应关系，这有2个问题：一使用者必须知道URL，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，
  • 【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 丶思想 vuevue.jsjavascript前端
    项目场景：谷歌浏览器问题描述谷歌浏览器el-dialog概率出现背景全黑，透明度不生效classv-modalopacity:0.5不生效解决方案：采用opacity:1background:0.5透明度的黑色代码如下：importVuefrom'vue'importElementfrom'element-ui'import'../element-variables.scss'/***来自Kare
  • element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer 春云资源 elementuicsshtmlcss3
    //没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效//有scoped为局部css--scoped只在本文件生效在这里设置el-dialog__header不生效//因此通过el-dialog的class进行全局css中局部定义只在当前文件生效点击打开Dialogdialog内容取消确定exportdefault{data(){return{centerDialogVi
  • 前端面试题2（vue3） GIS-CL 前端面试题前端vue.js
    1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat
  • 如何构建高效的 Vue 3 前端项目结构 东锋1.3 vue.jsvue.js前端javascript
    假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
  • Cursor前端开发提示词分享 前端程序猿i 前端
    点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • Vue3 中的 defineProps：优雅地实现子父组件传值 良月柒 vue.js前端javascript
    Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de
  • 使用css实现镂空效果 gurenchang css前端
    前言：最近在公司完成小程序的新手引导中遇到了要将蒙层挖空，漏出后面内容的功能，找了各种资料之后，发现了一种就使用几行css代码就实现这个效果的方式，在这里分享给各位小伙伴们。功能描述：实现下图的镂空效果代码展示：.mask{position:absolute;bottom:20rpx;left:50%;transform:translateX(-50%);width:90%;height:500r
  • vue3项目开发总结 Yaru11 vue前端
    一、项目准备1、明确项目需求和目标在开始构建项目之前，首先要明确项目的需求和目标。这包括了解项目的业务背景、功能需求、性能要求等，以便为后续的技术选型和架构设计提供指导。2、技术选型与框架选择前端框架：选择Vue3作为前端框架，利用其组件化、响应式等特性来提高开发效率和代码质量。构建工具：当前使用的是vue-cli。推荐使用Vite作为构建工具，因为它具有快速的冷启动、实时的热更新和简洁的配置等优
  • MTTK Vue Wrap 项目介绍 MTTKbelinda VUEWrapvue.js前端javascript
    关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
  • 对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端 昨今 前端htmlcss
    1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
  • 多线程编程之理财 周凡杨 java多线程生产者消费者理财
          现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
  • [Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
    首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
  • SecureCRT快捷键 daizj secureCRT快捷键
    ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首
  • Java 子类与父类这间的转换 周凡杨 java 父类与子类的转换
        最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。       代码：            
  • 可视化swing界面编辑 朱辉辉33 eclipseswing
          今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。       首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
  • web报表工具FineReport常用函数的用法总结（文本函数） 老A不折腾 finereportweb报表工具报表软件java报表
    文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。   CODE CODE(text):计算文本串中第一个字
  • mysql安装出错 林鹤霄 mysql安装
    [root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################
  • linux下编译libuv aigo libuv
    下载最新版本的libuv源码，解压后执行： ./autogen.sh   这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool     如果提示错误：make: *** No targe
  • 中国行政区数据及三级联动菜单 alxw4616
    近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用   文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0
  • 哈夫曼加密文件 百合不是茶 哈夫曼压缩哈夫曼加密二叉树
     在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;   加密步骤:  1,统计文件中字节出现的次数,作为权值   2,创建节点和哈夫曼树   3,得到每个子节点01串   4,使用哈夫曼编码表示每个字节  
  • JDK1.5 Cyclicbarrier实例 bijian1013 javathreadjava多线程Cyclicbarrier
    CyclicBarrier类 一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
  • 九项重要的职业规划 bijian1013 工作学习
    一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储
  • 【Java范型四】范型方法 bit1129 java
    范型参数不仅仅可以用于类型的声明上，例如   package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
  • 【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
      package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
  • ua实现split字符串分隔 ronin47 lua split
    LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
  • java-从先序遍历和中序遍历重建二叉树 bylijinnan java
    public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
  • openfire开发指南《连接和登陆》 开窍的石头 openfire开发指南smack
    第一步     官网下载smack.jar包     下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步     把smack里边的jar导入你新建的java项目中 开始编写smack连接openfire代码 p
  • [移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
        看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎      但是，对于手机的新设计，有几点我们也要注意      第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
  • 20款国外知名的php开源cms系统 cuiyadll cms
    内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
  • Java生成全局唯一标识符 darrenzhu javauuiduniqueidentifierid
    How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
  • php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
    SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
  • 5天学会一种 web 开发框架 dcj3sjt126com Web框架framework
    web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 建议把本文
  • Gson使用三(Map集合的处理,一对多处理) eksliang jsongsonGson mapGson 集合处理
    转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述        Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 package com.ickes.json; import java.lang.refl
  • cordova实现“再点击一次退出”效果 gundumw100 android
    基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
  • openldap configuration leaning note iwindyforest configuration
    hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
  • Nullability and Objective-C 啸笑天 Objective-C
    https://developer.apple.com/swift/blog/?id=25   http://www.cocoachina.com/ios/20150601/11989.html   http://blog.csdn.net/zhangao0086/article/details/44409913   http://blog.sunnyxx
  • jsp中实现参数隐藏的两种方法 macroli JavaScriptjsp
    在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
  • Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。   <a href="#/group-buy" class="btn bt
  • 二维数组在Java和C中的区别 流淚的芥末 javac二维数组数组
    Java代码：   public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } }  运行结果： Exception in thread "mai
  • systemctl命令用法 wmlJava linuxsystemctl
    对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他