开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

背景图像上的Css模糊:悬停但不在文本上

背景图像上的CSS模糊效果是一种常见的前端开发技术，它可以通过CSS属性来实现。该效果可以在悬停时应用于背景图像，但不会影响文本内容。

实现背景图像上的CSS模糊效果的步骤如下：

创建一个具有背景图像的HTML元素，可以是div、section或其他具有背景的元素。
使用CSS属性background-image设置背景图像的URL。
使用CSS属性background-size设置背景图像的尺寸，可以是具体的像素值或百分比。
使用CSS属性filter设置模糊效果。可以使用blur()函数来指定模糊的程度，值越大表示模糊程度越高。
使用CSS属性transition设置过渡效果，以实现悬停时的平滑过渡。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 500px;
  height: 300px;
  background-image: url("背景图像的URL");
  background-size: cover;
  filter: blur(0px);
  transition: filter 0.5s ease;
}

.container:hover {
  filter: blur(5px);
}
</style>
</head>
<body>

<div class="container"></div>

</body>
</html>

在上述示例中，.container类表示包含背景图像的元素。当鼠标悬停在该元素上时，通过修改filter属性的值来实现模糊效果的切换。

背景图像上的CSS模糊效果可以应用于各种场景，例如网页设计中的悬停效果、图片展示页面等。通过调整blur()函数的参数，可以实现不同程度的模糊效果。

腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Custom Beautify

小冰博客-教程：Butterfly主题的一图流和视频流背景修改方法参考了动态背景的实现方案小冰博客-butterfly随机背景最简单的写法参考了各类样式效果及css源码内容小康博客-Hexo博客之...例如我希望id为fixedElement的按钮牢牢固定在右下角，可以定义它的定位属性： hover选择器定义鼠标悬停到该元素上时的样式，例如，我希望鼠标悬停在上述这个id为fixedElement的按钮时...图片模糊渐变清晰点击查看图片模糊渐变清晰方案 css3中有个filter滤镜属性，可以提供高斯模糊滤镜。而animation动画属性支持给网页添加动画效果。把他们结合一下就可以了。...此处以给网页头图和网页背景添加图片渐变模糊为例，在中添加考虑到还有部分读者的需求是指定页面，可以在对应文章或者page的markdown文件里写css代码：鼠标指针样式替换点击查看鼠标指针样式替换...随机背景或banner效果图片模糊渐变清晰效果鼠标指针图标替换站点标签title动态变化

2.3K2 0

一步步教你用CSS添加SVG过滤器

在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。...实际上我们是通过告诉 CSS 过滤器所拥有的 ID，然后再把过滤器应用于 SVG 的方式来实现。使用同样的方法，过滤器也可以用于常规文本。...使用高斯模糊来柔化文本水边效果的边缘看起来有点扎眼。这可以用高斯模糊来解决。在置换贴图后面添加代码。当你刷新页面时，它确实模糊了文本，但位移也消失了。同样这些问题可以在实现效果的过程中被修复。...合并模糊 ? 通过合并操作，它看起来会更好合并操作使前面的效果与模糊效果合并。现在看上去与背景图像很搭，就好像光线穿过了水面一样。...当用户将鼠标悬停在菜单上时，菜单会滑出，单击菜单后其上的三条横线会变为 “X”，表示收起菜单。

2.9K2 0

CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常

说明因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因...然后我找到了 filter（滤镜)属性，他主要是运用在图片上，以实现一些特效。...然后用滤镜属性进行模糊后，发现他的效果是下图这样的：此时文字正常显示了，图片也模糊，但是我又遇到一个问题，就是如果图片是白色的，即使模糊掉，文字显示的效果也很差，比如下图这样：看到这个效果的时候...div class="father"> 正常显示的文本内容...filter和原背景图(父)盒子的宽高必须保持相同，否则会乱。背景图正常显示请添加：background-size: 100% 100%;属性。

3.4K2 0

CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。 ?...然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上编写CSS...同时设置一下黑色背景色以及透明度，做一个隐约的效果。...:hover { opacity: 1; } 就是这么简单，我们已经完成了图像悬停文本叠加效果。...我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。

3.5K2 0

CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。...然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上编写CSS...同时设置一下黑色背景色以及透明度，做一个隐约的效果。...:hover { opacity: 1; } 就是这么简单，我们已经完成了图像悬停文本叠加效果。...我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。

3.8K2 0

让你兴奋不已的13个CSS技巧🤯

创建堆叠上下文的一种方法是使用 isolation: isolate CSS样式声明。我们可以利用这种堆叠上下文技术来创建悬停效果，该效果可以交换按钮的背景。...然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。...以下是暗/亮模式的实际应用。用户的偏好在暗模式和亮模式之间进行模拟。 7.使用省略号（ ... ）截断溢出的文本这个技巧已经存在一段时间，用于美观地修剪长文本。但你可能仍然错过了它。...这就是你的网站访客在网络速度较慢的地理区域尝试欣赏你的高清内容时所经历的痛苦。但你可以通过 image-set CSS 技巧提供一种解救方法。可以为浏览器提供选项，让它决定最适合用户设备的图片。...如果支持 -webkit-image-set ，那么背景图像将会是一种优化的图像，也就是说，这将是一种支持的MIME类型的图像，且更适合用户设备的分辨率能力。

3175 0

分享 22 个实用的CSS小技巧，让你的网站更出色

媒体查询来创建响应式布局，使你的网站在不同设备上都能呈现出良好的用户体验。...：通过使用CSS的filter属性中的blur函数，你可以为图片添加模糊效果。...调整模糊程度，使图像呈现出柔和的视觉效果。 .image { filter: blur(5px); } 渐变背景色：使用CSS的linear-gradient函数，你可以为元素创建渐变背景色。...：使用CSS的background-clip属性和渐变背景色，可以为文本创建渐变效果。...将渐变应用到文本的背景区域，形成独特的渐变文本效果。

2541 0

历时4个多月，学习了这 66 个CSS 特效

对于 CSS 评价，无论是在论坛还是身边的人，我听到最多的是学 CSS 这些花里胡哨没啥用，实际项目中又用不到。听到这些心里还是挺实受挫的，有时候会怀疑自己，我学习的方向是不是错了。...但在几次的项目需要用到一些特效，我都能很快的找到思路并做出来，我想这是得益于，我平时所学的这些特效积累出来的。现在我不在困惑我所学的东西，因为学习成长是你自己事情，而不是别人在意的眼光。...这个需要2瓶快乐水的钱，毕竟整理这些还是挺幸苦的，有兴趣的可以自己看看。 01.波浪文本动画效果 ? 视频地址1：https://www.ixigua.com/i68077......视频地址二：https://www.ixigua.com/i68166... 18.3D透视图与分层图像悬停效果效果 ?...视频地址二：https://www.bilibili.com/vide... 59.弹出框与模糊的背景特效效果 ? 视频地址一：https://www.ixigua.com/i68451...

5K6 3

H5+CSS3+JS逆向前置——CSS3、基础样式表

H5+CSS3+JS逆向前置——CSS3、基础样式表 HTML概述 HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。...HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。 HTML的主要元素包括：元素：包括段落、标题、链接、图像、列表等等。...用户界面属性：包括鼠标悬停效果（如 hover 颜色）、表单控件样式（如 input 的 type 属性对应的样式）等。...以下是一些CSS3的主要样式表：边框圆角（Border Radius）：允许您设置元素的边框圆角。背景渐变（Background Gradients）：允许您创建背景渐变效果。...渐变背景（Linear Gradients Background）：允许您在元素上创建线性渐变背景。转换（Transformations）：允许您改变元素的大小、位置和形状。

1661 0

CSS Transitions

「触发过渡：」过渡通常在「元素的状态发生变化时触发」。例如，当我们悬停在按钮上时，可以更改其背景颜色，过渡效果将使颜色平滑地在指定的持续时间内变化。...---- 子像素渲染子像素渲染（Sub-pixel rendering）是一种图形渲染技术，通常用于改善文本和图像在计算机屏幕上的呈现质量。...子像素渲染在高分辨率显示设备上更为明显，而在低分辨率设备上可能不太明显或无法有效运用。它通常用于确保文本和图像在屏幕上的最佳呈现。...动画性能是一个庞杂的领域，不在本文的讨论范围内。但让我们挑选几个比较重要的点来简单说说：一些CSS属性比其他属性更耗时。例如，height是一个非常耗时的属性，因为它影响布局。...这个 span 元素包含了所有的样式（背景颜色、字体等等）。当我们悬停在这个普通的按钮上时，它会导致子元素从上方露出。然而，按钮本身是静止的。

3173 0

CSS中的混合模式，制作高级特效的必备技巧进入mix-Blend-Mode

上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。什么是混合？...在此示例中，我想探讨文本如何与树叶背景融合。由于图像中包含暗点和亮点，因此在使文本看起来像在每片叶子下移动一样，这将起到非常有用的作用。 ?...储值卡另一种情况是使用裁切图像并将其与其下方的背景融合，结果非常有趣。...如你所见，文本“ CSS很棒”仅在其父代的边界内融合。外面的东西不会混在一起。换句话说，它是孤立的。...进入Background-Blend-Mode 它的工作方式类似mix-blend-mode，但具有多个背景图像。每个背景可以有自己的混合模式，举个例子。 ?

3.4K4 0

每个前端开发需要了解的10个强大的CSS属性

鼠标指针样式在鼠标悬停在元素上时，改变鼠标指针的样式。...Masks 可以在CSS中使用图像遮罩。...Filter 我们可以使用CSS为图像添加惊人的滤镜效果。滤镜效果是我们在每个照片分享应用程序中都会看到的功能，现在让我们看看它们有多容易实现。...`img{ filter: / 你的值 /; }` 有许多可用的滤镜效果。可以使用模糊、增加亮度、饱和度等滤镜效果。可以使图像变为灰度、更改不透明度、反转颜色等等。...backdrop-filter提供了filter的所有属性。简而言之，它是一个应用于背景的滤镜效果。

2582 0

18个很有用的 CSS 技巧

今天来分享 18 个鲜为人知但很有用的 CSS 技巧！图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。...背景混合模式在CSS中可以使用 background-blend-mode 来实现元素背景的混合： .blend-1 { background-image: url(https://duomly.nyc3...支持的背景混合模式：正常|乘法|屏幕|叠加|变暗|变亮|颜色减淡|饱和度|颜色|亮度；图像填充文字效果要想实现图像填充文字效果，可以设置 background-clip: text 以使文字背景作为整个区域的背景...文字描边效果在 CSS 中可以使用 text-stroke 属性使文本更易读，它会向文本添加轮廓效果。...更写书写方向通常我们常见的网页文字是从左向右布局的，在CSS中可以使用 writing-mode 属性来指定文本在网页上的布局方式，即水平或垂直。

5372 0

神奇的CSS，几行代码就可以让照片变老照片的效果

使用CSS一步一将照片变成旧照片。本文将回顾如何仅使用 CSS 在任何图片上创建旧照片效果。无需 Photoshop 或任何其他图像编辑器。只需几行代码！...sepia(1)：将颜色更改为旧照片的棕褐色。此外，我们可以添加一个额外的 blur(0.5px)（它不必是整数或大于 1）来使照片稍微模糊一点并完成滤镜效果。但这不是必需的。...旧照片看起来更集中在中心，但随后它们会退化，失去颜色并且边缘变得有点模糊。我们可以通过在 CSS 中应用遮罩来实现。不幸的是，并非所有浏览器都支持遮罩……对我们来说幸运的是，供应商前缀是！...因为中心是用蒙版裁剪的，所以滤镜不会应用于图像的中心，只会根据蒙版应用于可见区域和可见度。例如，如果我们应用 blur() 背景滤镜，则完全可见的边缘会比仅部分可见的中间部分更加模糊。...我们将使用的另一个选项是直接在 CSS 中内联 SVG（不在 HTML 端添加任何内容）。

3K3 0

UNITE Gallery-主题食用文档

//true,false - 启用/消除键盘控件 gallery_carousel:true, //true,false - 最后一个图像上的...: true, //启用文本面板背景 slider_textpanel_bg_color:"#000000", //文本面板背景色 slider_textpanel_bg_opacity...如果为空 - 从 CSS 中获取 slider_textpanel_css_description:{}, //文本面板描述的附加 CSS slider_textpanel_bg_css...:{}, //文本面板背景 CSS //thumbs options thumb_width:88, ...thumb_image_overlay_type: "bw", //bw , blur, sepia - 图像效果叠加的类型，黑白，棕褐色和模糊.

2.1K2 0

HTML以及CSS初级操作

"引起来版权符号(©) © ©20013-2018 1.1.3 图像标签常见的图片格式 jpg格式在internet上被管饭支持的图像格式,压缩后体积很小，适合用于摄影或连续色调图像的高级格式...；gif格式是在网页中使用最广泛、最普遍的一种图像格式，他是图像交换格式(Graphics Interchange Format)的缩写,gif支持透明色，使得Gif图像在网页的背景和一些多层特效的显示上使用得非常多...图像标签的基本语法 1.1.4 超链接标签超链接的基本用法...这种方式不能是内容与表现分离，本质上没有体现CSS的优势，因此不推荐使用。...、不同的部分背景属性背景颜色在css中使用backgroun-color来设置背景颜色，与color用法相同背景图像在css中使用backgroun-image属性设置背景图片，通常会与background-position

2.5K3 0

为你的网页添加深色模式

然后由浏览器来实现这些新元素，浏览器自行决定以哪种顺序去实现它们，这就是为什么现在对新功能的支持不匹配的原因。虽然这可能会令人讨厌，但实际上完成了规范的浏览器要好得多。...首先添加一个容器，以便将内容集中起来，然后再添加一些标题和文本。将 CSS 设置为使用 Sass 以便在CSS中使用嵌套。...应用自定义属性现在定义了一些可以在CSS中使用的自定义属性。我们将从正文开始，并应用背景和文本颜色。为了使用自定义属性，我们用了 var(--custom-property-name)语法。...添加图像 ? 添加图像并将其浮动到内容旁边现在将图像添加回我们的内容，然后可以添加一些基本样式来将图像浮动到内容旁边。...创建按钮悬停样式使用相同的变量，还可以创建可用于两个主题的悬停样式。为了实现这一点，当用户将鼠标悬停在按钮上并转换这些属性时，我们将反转颜色。

1.6K3 0

皮肤引擎(HTMLayout)特性说明文档

, 被引用的文件如果不在同级目录, 引用后里面的相对路径都会基于引用页的路径处理....: red yellow blue yellow; /* 格式: 上左颜色上右颜色下右颜色下左颜色 */ 这个渐变填充的实现与 CSS3 标准不同, 能实现的效果也有限....(0.5,0,0.5,1.2); 引擎支持对前景和背景图像的多种变换效果....如果被设置此样式的对象有前景/背景色或图像填充, 光晕的边缘会按背景的轮廓绘制....: 遍历当前鼠标悬停的 .item 元素内的所有 .icon 元素, 并将他们的背景设置为灰色.

3164 0

【CSS】378- 44个 CSS 精选知识点

让图片在容器中显示的更舒适设置图像在其容器内的适合度和位置，同时保留其宽高比。以前只能使用背景图像和background-size属性来实现。...CodePen上查看和编辑代码说明 background-image:url(...)添加SVG形状（24x12三角形）作为伪元素的背景图像，默认情况下重复。它必须与要分割的块颜色相同。...caninuse - css-variables caninuse - css-transitions 38.悬停阴影动画在文本上悬停时，在文本周围创建一个阴影框动画效果。 ?...39.悬停下滑线动画当文本悬停时，创建文本下划线动画效果。...可在CodePen上预览效果和编辑代码如果你想在右侧和底部对齐背景图像，则只能使用直线长度值。所以现在可以使用calc（）函数.

5.4K1 0

不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验为什么尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success...标准要求：除了字幕和文本图片外，文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。...如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。还不信服？你可能会想："但当我把浏览器放大到 200% 时，按钮文本看起来很好！"...根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。...CSS 属性，如 max-width ，但我个人更倾向于使用尽可能少的 CSS 属性（以降低长期维护成本）。

1161 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭