- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我目前有一个我悬停在其上的图 block 最初是模糊的。图像缩小后,这种模糊会稳定下来并在图 block 上产生不良效果。请查看我粘贴的代码。它应该让您对我在说什么有一个清晰的认识。
我尝试在图像悬停前后修改 CSS,但这并没有改变任何东西。
.tiles {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
postiion: relative;
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
position: relative;
width: calc(33.33333% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
.tiles article > .image {
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
position: relative;
display: block;
width: 100%;
border-radius: 4px;
overflow: hidden;
}
.tiles article > .image img {
display: block;
width: 100%;
}
.tiles article > .image:before {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: background-color 0.5s ease, opacity 0.5s ease;
-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
-ms-transition: background-color 0.5s ease, opacity 0.5s ease;
transition: background-color 0.5s ease, opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 1;
opacity: 0.8;
}
.tiles article > .image:after {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.25;
z-index: 2;
}
.tiles article > a {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
transition: background-color 0.5s ease, transform 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #ffffff;
text-align: center;
text-decoration: none;
z-index: 3;
}
.tiles article > a > :last-child {
margin: 0;
}
.tiles article > a:hover {
color: #ffffff !important;
}
.tiles article > a h2 {
margin: 0;
}
.tiles article > a .content {
-moz-transition: max-height 0.5s ease, opacity 0.5s ease;
-webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
-ms-transition: max-height 0.5s ease, opacity 0.5s ease;
transition: max-height 0.5s ease, opacity 0.5s ease;
width: 100%;
max-height: 0;
line-height: 1.5;
margin-top: 0.35em;
opacity: 0;
}
.tiles article > a .content > :last-child {
margin-bottom: 0;
}
body:not(.is-touch) .tiles article:hover > .image {
-webkit-filter: blur(5px);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
body:not(.is-touch) .tiles article:hover > .image:before {
background-color: #333333;
opacity: 0.35;
}
body:not(.is-touch) .tiles article:hover > .image:after {
opacity: 0;
}
body:not(.is-touch) .tiles article:hover .content {
max-height: 15em;
opacity: 1;
}
* + .tiles {
margin-top: 2em;
}
body.is-loading .tiles article {
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.8;
}
body.is-touch .tiles article .content {
max-height: 15em;
opacity: 1;
}
@media screen and (max-width: 1280px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(33.33333% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
}
@media screen and (max-width: 980px) {
.tiles {
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
width: calc(50% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
}
@media screen and (max-width: 736px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(50% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
.tiles article:hover > .image {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
}
}
@media screen and (max-width: 480px) {
.tiles {
margin: 0;
}
.tiles article {
width: 100%;
margin: 1.25em 0 0 0;
}
}
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<section class="tiles">
<article>
<span class="image">
<img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" />
</span>
<a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank">
<h2>IrackBot</h2>
<div class="content">
<p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC
</p>
<h3>
<i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i>
</h3>
</div>
</a>
</article>
</section>
</body>
您是否注意到将鼠标悬停在图像上并进行缩放后,图像有轻微的不模糊/稳定?我希望摆脱它并使其模糊。
最佳答案
要在 Firefox 上获得模糊效果,只需添加 filter: blur(5px);
以及 -webkit-filter:
,模糊效果也适用于 FF35+。
至于那里出现的不模糊,实际上是一个发生在 Chrome 上的错误(可能还有所有其他 webkit 浏览器)。但这不会发生在 Firefox 上。
所以要修复它,您需要添加:transform: translateZ(0);
,这不会导致任何视觉差异,并且会解决 Chrome 上的问题。
.tiles {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
postiion: relative;
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
position: relative;
width: calc(33.33333% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
.tiles article > .image {
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
position: relative;
display: block;
width: 100%;
border-radius: 4px;
overflow: hidden;
}
.tiles article > .image img {
display: block;
width: 100%;
}
.tiles article > .image:before {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: background-color 0.5s ease, opacity 0.5s ease;
-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
-ms-transition: background-color 0.5s ease, opacity 0.5s ease;
transition: background-color 0.5s ease, opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 1;
opacity: 0.8;
}
.tiles article > .image:after {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.25;
z-index: 2;
}
.tiles article > a {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
transition: background-color 0.5s ease, transform 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #ffffff;
text-align: center;
text-decoration: none;
z-index: 3;
}
.tiles article > a > :last-child {
margin: 0;
}
.tiles article > a:hover {
color: #ffffff !important;
}
.tiles article > a h2 {
margin: 0;
}
.tiles article > a .content {
-moz-transition: max-height 0.5s ease, opacity 0.5s ease;
-webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
-ms-transition: max-height 0.5s ease, opacity 0.5s ease;
transition: max-height 0.5s ease, opacity 0.5s ease;
width: 100%;
max-height: 0;
line-height: 1.5;
margin-top: 0.35em;
opacity: 0;
}
.tiles article > a .content > :last-child {
margin-bottom: 0;
}
body:not(.is-touch) .tiles article:hover > .image {
-webkit-filter: blur(5px);
filter: blur(5px); /* firefox 35+ */
-moz-transform: scale(1.1);
-webkit-transform: translateZ(0) scale(1.1); /* Chrome fix - add translateZ */
-ms-transform: scale(1.1);
transform: translateZ(0) scale(1.1); /* Here as well */
}
body:not(.is-touch) .tiles article:hover > .image:before {
background-color: #333333;
opacity: 0.35;
}
body:not(.is-touch) .tiles article:hover > .image:after {
opacity: 0;
}
body:not(.is-touch) .tiles article:hover .content {
max-height: 15em;
opacity: 1;
}
* + .tiles {
margin-top: 2em;
}
body.is-loading .tiles article {
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.8;
}
body.is-touch .tiles article .content {
max-height: 15em;
opacity: 1;
}
@media screen and (max-width: 1280px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(33.33333% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
}
@media screen and (max-width: 980px) {
.tiles {
margin: -2.5em 0 0 -2.5em;
}
.tiles article {
width: calc(50% - 2.5em);
margin: 2.5em 0 0 2.5em;
}
}
@media screen and (max-width: 736px) {
.tiles {
margin: -1.25em 0 0 -1.25em;
}
.tiles article {
width: calc(50% - 1.25em);
margin: 1.25em 0 0 1.25em;
}
.tiles article:hover > .image {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
}
}
@media screen and (max-width: 480px) {
.tiles {
margin: 0;
}
.tiles article {
width: 100%;
margin: 1.25em 0 0 0;
}
}
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<section class="tiles">
<article>
<span class="image">
<img src="http://cdn.iwillteachyoutoberich.com/wp-content/uploads/2008/11/generic-candy.jpg" />
</span>
<a href="#zaplan" class="portfolio-link" data-toggle="modal" target="_blank">
<h2>IrackBot</h2>
<div class="content">
<p>Featured on the official Slack website, IrackBot is built for for Efficient and Manageable Open Source communication across Slack and IRC
</p>
<h3>
<i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i><i class="fa fa-lg fa-angle-right" aria-hidden="true"></i>
</h3>
</div>
</a>
</article>
</section>
</body>
关于html - 如何摆脱 'settle blur' CSS 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39299942/
我想对我网站的一部分进行模糊处理,通过单击链接可以使其变得不模糊。为了使这个平滑,我需要应用 blur(0px) 并在元素上进行过渡。但问题是即使使用 blur(0px),文本也会变得不清晰。 .pa
我有一些在元素上的“模糊”事件上运行的代码。此代码需要实际使用 activeElement,因此无法实际从“blur”事件运行。 我希望我能创建一个这样的事件。目的是“willblur”事件在“blu
我认为这个问题很简单。代码如下。 Show Menu let parent = document.getElementById('parent');
所以,我有一个简单的问题,实际上我已经把它写在标题中了。 :) 但我会再重复一次,只是为了完全清楚。问题是: 有没有办法知道“blur”是由“element.blur()”调用的还是“实际的”模糊?我
请看一下这个 jsfiddle:https://jsfiddle.net/heLwx9bz/ 我正在尝试通过过渡“取消模糊”悬停时的一些文本。请注意在转换为 blur(0px) 时文本如何轻微抖动,它
I have written this pen 编辑 see this pen of Alexander Omara for a shorter version of my pen 基本上,我们将 b
TL;DR 我怎样才能得到这个 self-explanatory JSFiddle上类? 来自 the W3C : The blur event occurs when an element lose
我想检测我的浏览器窗口是否有焦点(被选中)。我使用以下代码来执行此操作: $(window).focus(function() { window.focusFlag = true; }).bl
我有两个文本框,其值为"is"和“否”。当我在第一个文本框中输入"is"时,它会发出蜂鸣声,其余文本框也会发生同样的情况。当我在相应的文本框中输入正确的值时,声音应该仅播放一次。 就我而言,声音一次又
所以我遇到的问题似乎有点奇怪。因此,我有一个隐藏的表单,直到单击按钮为止,单击按钮后,表格就可见,并且在输入上有一个 .blur 函数来检查它们是否为空。我尝试在整个 pcontroller 中添加
我正在尝试创建一个可以使用所有可能的填充选项的模糊函数。但是对于BORDER_CONSTANT,您还需要提供颜色,即您要用来填充图片的数字。在opencv的模糊文档中,我看不到需要填充和颜色值的函数模
我有 2 个元素。第一个元素有一个 blur 事件,第二个元素有一个 mousedown 事件。第二个元素上的 mousedown 事件将焦点返回到第一个元素,但由于某种原因会触发第一个元素上的 bl
我试图使用 jQuery 创建一个可编辑的表格。 作为它的一部分,我显示了一个 td 的文本区域 onClick 并且在该文本区域的模糊处我隐藏了它。 问题是当我继续点击其他 td 时,文本区域模糊会
这里 Sample DEMO 我想在类 .drow1 .subval 失去焦点时触发事件,可能缺少某些内容, JS: $(".drow1 .sub_val").on('blur',funtion(){
这是我的代码: 我将以下几行放入脚本中 $('#m').on('blur', alert('blurred');); $('#m').on('focus', alert('focused'););
我有这段代码: window.addEventListener( "focus" , function(){ window.console.log("focus"); } , false );
我为我正在开发的网络应用程序编写了一个自定义下拉列表,并且我想用它来完成一组特定的功能。首先,如果您将鼠标移离菜单,我希望下拉菜单保持打开状态。我希望当您重新单击下拉列表标题、单击下拉列表中的元素之一
我有 3 个 .blur,但出于某种原因只有第一个有效。这是 jquery 代码: $(document).ready(function() { $("#user_name"
我正在尝试使用 HTML5 来验证数字输入。我正在使用 jQuery 来创建元素。如何让浏览器在不单击提交按钮的情况下显示 onBlur 错误消息? jQuery(document.createEle
我一直在试验 backdrop-filter最近,通常使用它来模糊元素后面的任何内容(这是动态的,所以 我不能只使用像 this 这样的东西)。但是,我还需要为所述元素应用阴影,所以我简单地添加了 b
我是一名优秀的程序员,十分优秀!