相关疑难解决方法(0)

每当鼠标悬停在只有CSS的图像上时,我就会尝试为图像添加透明的黑色叠加层.这可能吗？我试过这个:

http://jsfiddle.net/Zf5am/565/

但我无法让div出现.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

如何从背景图像中删除白色模糊边框.

<div class="background-image"></div> 

CSS,我尝试添加保证金:-10px,但它不起作用

.background-image {
  background: no-repeat center center fixed; 
   background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ; 
  background-size: cover;
  display: block;
  height: 100%;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  margin:0px auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

 }

http://jsfiddle.net/maio/8wq132nd/1/

我似乎在这里尝试了书中的所有技巧,但没有任何工作.

我有一个全屏,绝对定位的HTML5视频背景,我需要模糊.但是,我希望它有锋利的边缘.

到目前为止,我已经在网上尝试了大约20或30种不同的解决方案,似乎没有任何效果.

这是我尝试过的:

- 设置负边距

- 设置负顶部,左侧,右侧,底部边距

- 在隐藏溢出的容器中设置正边距

- 设置在隐藏溢出的容器中

- 方法在这里注意:定义边缘与CSS3滤镜模糊 - 定义边缘与CSS3滤镜模糊 - CSS模糊和保持锋利的边缘使用绝对div - 模糊绝对背景,同时保持坚实的边缘 - http://volkerotto.net/2014/07/03/CSS-背景图像模糊,而无需-blury-边缘/

这是迄今为止的代码:

HTML

<video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0">
<source src="vid/myVid.mp4" type="video/mp4">
<source src="vid/myVid.webm" type="video/webm">
    Sorry, your browser does not support HTML5 video.
</video>

CSS

#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100% !important;
    max-height: 100% !important;
    z-index: -1000;
    overflow: hidden;
    object-fit: fill;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
}

也许我做错了什么,我不太确定.我正在做什么阻止它工作？ …

我想在悬停时模糊图像.

问题是图像的边缘也会令人不快地模糊.在小提琴中你可以清楚地看到绿色背景.

如果我缩放图像即1.2,它最终会解决问题,但在过渡期间仍会出现模糊边缘.

任何想法如何有这种效果的尖锐边缘？

http://jsfiddle.net/d8Njs/

HTML:

<div class="item">
   <img src="http://placekitten.com/300"/>
</div>

CSS:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}

我正在尝试使用css模糊滤镜,同时保持图像的不透明度.在下面的示例中,我有一个只是蓝色方块的图像.当我应用模糊滤镜时,边缘最终变为透明,您可以看到下面的黑色div.如果没有引入透明度,有没有办法应用模糊？理想情况下,我希望它只在平均中包含跨度内的可见像素.我知道在这个例子中它只会产生一个稳定的蓝色方块,但对于不那么简单的情况,它会给出我正在寻找的结果.

div {
  background-color: black;
  width: 100px;
  height: 100px;
}
span {
  overflow: hidden;
  -webkit-filter: blur(30px);
  display: block;
}

<div>
  <span>
    <img width="100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png">
  </span>
</div>

当我模糊图像时,它会溢出父容器,甚至指定要隐藏的溢出.有没有办法将模糊的边缘保持在尺寸内？

图像需要是css背景而不是标签内部

示例不起作用:

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

我的图像有问题.我试图模糊图像的一部分,但我的解决方案无法正常工作.请看一下这段代码:

HTML文件

<div id="image">
    <div class="blur"></div>
</div>

CSS文件

#image {
    width: 940px;
    height: 360px;
    background-image: url('../img/photo.png');
}

#image .blur {
    background-image: url('../img/photo.png');
    background-position: center right;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    filter: blur(3px);
    float: right;
    height: 100%;
    width: 360px;
}

CSS中有可能吗？

我在HTML页面的主体内部和上面都有一个div元素.它具有ID"背景".

<body>
    <div id="background"></div>
    <!-- The rest of the page is below #background -->
</body>

背景有自己的div并且不仅仅是身体的一部分的原因是因为我在加载时对背景应用了一些动画,我不希望它们反映在身体内的其他元素上.

背景div的CSS如下所示:

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: url(backgrounds/moon.png) no-repeat center center fixed;
    filter: blur(7px) brightness(0.75);
    -webkit-filter: blur(7px) brightness(0.75);
    -moz-filter: blur(7px) brightness(0.75);
    -ms-filter: blur(7px) brightness(0.75);
    -o-filter: blur(7px) brightness(0.75);
}

为了避免混淆,我删除了动画CSS,因为这不是问题的原因.

上面的HTML和CSS的结果如下所示:

(您可能希望在新选项卡中打开图像以查看边缘模糊更清晰)

在图像的边缘,您将看到它们被模糊的地方,白色背景开始通过赋予它内部发光效果.我试图删除这个基本上让图像模糊但保持锐利的边缘.

我非常感谢任何帮助我解决这个问题的人,因为它已经让我退了很长一段时间.我也知道有一些类似于这个问题的其他一些问题,但是我希望能让问题更加清晰,我也在使用不同的方法来应用背景(绝对div).

JSFiddle:http://jsfiddle.net/nvUKT/