jquery+css实现图片亮度四个等级调节代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现图片亮度四个等级调节代码
代码标签: jquery css 图片 亮度 四个 等级 调节 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <style> body{ background-color: black; } .background{ position: fixed; width: 100%; height: 100%; margin: auto; padding: 0; z-index: -1; transition: all 2s; background-position: center center; background-size: cover; background-repeat: no-repeat; background-image: url("//repo.bfw.wiki/bfwrepo/image/655d5e532c0b7.png"); filter: brightness(0%); } .light1{ filter: brightness(25%) } .light2{ filter: brightness(50%) } .light3{ filter: brightness(75%) } .light4{ filter: brightness(100%) } .container{ position: fixed; z-index: 2; width: 50%; height: fit-content; margin: auto; padding: 0; display: flex; flex-direction: row; justify-content: space-evenly; } .container{ top: 50%; left: 50%; transform: translate(-50%, -50%) } .icons{ cursor: pointer; width: 5em; height: 5em; margin: auto; padding: 0; display: flex; flex-direction: column; align-items: c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0