css前后对比特效

最新推荐文章于 2024-05-13 17:48:02 发布
最新推荐文章于 2024-05-13 17:48:02 发布
阅读量292 收藏
点赞数
分类专栏： 前端升级 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46341900/article/details/120693423
版权

1.准备知识

在这里插入图片描述

写在前面的准备知识

filter:

blur(5px)

filter: brightness(0);

100%为原样子

contrast 对比度 ，对比越大，想应的颜色越亮

drop-shadow 跟box-shadow很像 但是可能一些浏览器开启硬件加速

drop-shadow(x y radius color)

grayscale() 灰度 100%全灰

hue-rotate色相旋转，不知道干嘛的

invert(翻转) 不知道干嘛的

下面提一下关于 -webkit-appearance对于浏览器的兼容非常不好，他可以修改系统的默认样式，比如你给< input type=“range” > 设置了以后中间的滑动条会消失，在下面的代码中你想要给-webkit-slider-thumb的默认样式取消，就要给这个伪类加 -webkit-appearance：none;
下面这个的兼容性不是很好，以后可以改一下，将slider直接用div做

下面直接给代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container{
				--height:400px;
				width: 600px;
				height: var(--height);
				border-radius: 4px;
				box-shadow: 0px 0px 4px 2px rgba(0,0,0,.15);
				position: relative;
			}
			.container::before,.container::after{
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				background-image: url(https://img0.baidu.com/it/u=2567670815,24101428&fm=26&fmt=auto);
				width: 100%;
				height: 100%;
				background-size: cover;
			}
			.container::before{
				filter: grayscale(100%);
			}
			.container::after{
				clip-path: inset(0 0 0 var(--slider));
			}
			.slider{
				position: absolute;
				z-index: 100;
				-webkit-appearance: none;
				outline: none;
				background-color: transparent;
				width: 100%;
			}
			
			.slider::-webkit-slider-thumb{
				-webkit-appearance: none;
				width: 14px;
				background: #222222;
				height: var(--height);
				cursor: ew-resize;
			}
		</style>
	<body>
		<div class="container" style="--slider:50%">
			<input type="range" class="slider" min="1" value="50" oninput="this.parentNode.style=`--slider:${this.value}%`" style="0.01">
		</div>
	</body>
</html>
小爷很皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css怎么设置图片的对比度？
html前端基础入门教程
04-23 1863
css怎么设置图片的对比度？下面本篇文章给大家介绍一下使用css设置图片对比度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 css怎么设置图片的对比度？ 在CSS中，可以使用filter:contrast(%)样式来给图片设置对比度。其中filter属性用于给图片加滤镜效果，设置值为contrast(%)可以调整元素的对比度。 示例： <!DO...
css之分割线特效
embelfe_segge的博客
05-17 217
温馨小提示，下面的盒子用的都是Grid布局，如果想要其他布局可以点击这里CSS Grid Generator 盒子html <div class="parent1"> <div class="div1">斜分割线</div> <div class="div2">SETTINGS</div> <div class="div3">HTML</div> <div
Leaflet双屏对比
06-01
该示例实现了基于leaflet的地图双屏对比，其中利用了leaflet接口加载arcgis的切片服务
实例：用CSS和JS创建“前后”图像对比效果
web前端开发
01-12 1781
来源 | https://blog.zhangbing.site/2021/01/04/how-to-create-a-before-after-image-slider-with-cs...
CSS常用滤镜效果
最新发布
不负光阴不负自己，不负被爱不负所爱 ​
05-13 443
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
css实现加载遮罩层 CSS 模糊效果 CSS 黑白效果 CSS调整亮度 对比度 饱和度 模糊效果 黑白效果反转颜色
半只
09-22 1603
设置 模糊 为 1px, 亮度增加 60%, 对比度增加 60%, 饱和度增加 100%, 灰度 100%用于调整元素与背景之间的对比度，可以设置一个百分比值或者一个具体的颜色值，例如。用于增加或减少元素的饱和度，可以设置一个百分比值或者一个具体的颜色值，例如。用于将元素转换为灰度图像，可以设置一个百分比值或者一个具体的颜色值，例如。用于调整元素的亮度，可以设置一个百分比值或者一个具体的颜色值，例如。用于模糊元素，可以设置模糊的程度，例如。表示将元素与背景的对比度增加60%。表示将元素亮度增加60%
比较两个css的比对器,css选择器对比
weixin_31623707的博客
08-03 549
1.标签选择器标签选择器也就是html中的标签，如,等css选择器/* 标签选择器 */p{font-size: 20px;color: red;text-align: center;}勇气测试标签选择器结果如图图一2.类选择器类选择器是css代码中最常用到的使用如下css选择器/* 类选择器 命名格式 .类选择器名称{}*/.setRedColor{color: red;font-size:...
CSS放大镜特效
a1101282836的博客
11-16 933
一、CSS代码 #divcss5 { width: 120px; height: 90px; padding: 5px;  border: 1px solid #ccc; position: relative; }  #divcss5 .small_pic { width: 120px; height: 90px; background: #eee;  position: re
Leaflet双屏对比，地图联动
xu762102319的博客
02-18 2492
19年了 决定自己有时间开始写写博客，多积累些知识。 第一条博客，leaflet的双屏对比或者说地图联动。 话不多说直接上代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;leafletdemo&lt;/title&a
写html和css怎么分屏,如何使用CSS创建分屏（50/50）？
weixin_42524165的博客
06-26 732
要使用CSS创建拆分屏幕，代码如下-示例html>body{font-family:Arial;color:white;}h1{padding:20px;}.left,.right{height:100%;width:50%;position:fixed;z-index:1;top:0;overflow-x:hidden;padding-top:20px;}.left...
对比度 css_更好的颜色和对比度可访问性CSS技巧
Web design 教程小屋
07-09 1751
颜色可访问性是视觉可访问性的重要部分。 患有各种类型的视觉障碍（例如色盲和低视力）的人以不同的方式感知颜色。 结果，对于视觉障碍的用户，颜色的含义变得不太重要或完全消失。 要了解受视觉障碍影响的人们如何感知颜色，可以使用ColorHexa的色盲模拟器测试任何颜色。 例如，以下是具有单色性，双色性和三色性的人如何看到红色（＃ff0000）： 1.检查文本的可读性 尽管使用高对比度的颜...
CSS3和HTML5图片加工前后对比代码.zip
07-04
CSS3和HTML5图片加工前后对比代码是一款通过CSS3和HTML5将图像转换为自动响应的元素；图像缩放和裁剪以适应容器。
html设置背景对比度,css中设置background属性
weixin_35338620的博客
06-18 635
属性解释background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：background-color 设置背景颜色background-image 设置背景图片地址background-repeat 设置背景图片如何重复平铺background-position 设置背景图片的位置bac...
前端练习55 图片对比效果
多啦的博客
07-11 1248
题目 今天在整理收藏夹时，发现有一个很不错的网站picdiet，可以用来压缩图片，效果很不错。 不过今天的练习不是关于图片压缩，而是它的官方的一个用来对比压缩前后图片的效果的组件，效果如下： 试着在Vue中实现这个效果 分析 分几个模块来实现。在搭起架子后，首先实现中间的分割线，样式不难，两边的小三角也可以用border模拟实现 .separator { position: absolute...
【jquery】图片前后对比效果——beforeAfter
dengrongshou5105的博客
06-17 350
今天分享一款 jquery 插件——图片前后对比（beforeAfter），效果如下： 使用方法： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>图片前后对比</title> <...
CSS学习笔记----1.认识CSS
05-05 91
初识CSS CSS层叠样式表（Cascading Style Sheets），HTML学习是我们成为前端开发的第一步，而CSS则是你跨向成功的第二步。通过CSS可以让你原本简陋的HTML变得非常的丰富多彩，豪不夸张地说：掌握了CSS，能限制住你的，只有你的想象力。 我们通过百度新闻页去除CSS前后对比，初步了解一下CSS： ...
html先后顺序显示效果,CSS作用顺序，优先级（文件、本页与style属性谁先谁后）...
weixin_36444910的博客
06-03 967
一个网页由html元素与CSS样式合作打造，html元素用来排版布局，CSS样式用来修饰。而html元素与CSS样式是各自独立的，各发挥各的作用。CSS样式可以在三个地方定义，分别为：CSS文件、html网页内和元素的style属性中，问题来了，如果同时在两个地方定义了同一个CSS样式，那么谁发生作用？在CSS样式中，不存在两个同名同属性的CSS共同发挥作用的问题，所以只有CSS作用顺序或者说CS...
关于CSS的颜色，你知道多少？
一碗周
08-20 835
Hello 大家好，我是彼岸繁華????，一个坚信努力可以改变命运的前端????????‍????，如果有幸写的文章可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第十八篇-《CSS颜色的基本概念以及用法》 编写不易转载请获得允许 写在前面 颜色的相关概念 关于CSS颜色的内容，首先需要来了解一些有关颜色的相关概念，具体有如下几个概念： 色调：很接近通俗意义上的颜色。 饱和度：是指颜色中灰色的含量。 亮度：是指颜色中黑色的含量。 对比度：前景色与背景色之间的差异。 We
用css和js解决背景图片切换和渐变效果
weixin_50505705的博客
03-31 1913
用css和js解决背景图片切换和渐变效果 1.css部分 .b{background-image:url(/image/dayin_logo.gif)left top no-repeat; width: 100%; min-width:1200px; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; -webkit-transition: all 1s linear; transition: a

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值