css 我尝试使用渐变来产生图像边缘的淡入淡出效果,为什么不起作用？

lf3rwulv 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(196)

我想让我的图像的边缘模糊，或者至少，淡出模糊。我已经尝试过没有工作，我已经看了所有的Stackoverflow的问题。我使用CSS，而不是Sass。复杂的问题是，我有一个背景图像在页面上，我用一个白色的面具覆盖与.8不透明度。有人能帮忙吗？
这是我的Codepen。

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  overflow: hidden;
  margin-top: -6px;
}

.bg {
  background-image: url('//newsinteractive.post-gazette.com/.testLaura2/shutterstock_246230623.jpg');
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  filter: blur(3px);
}

.bg-mask {
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

#ballerina {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background-image: url('http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg');
}

#ballerina:after {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}

<div class="bg"></div>
<div class="bg-mask"></div>

<div class="screen height-auto">
  <div id="ballerina"></div>
</div>

css

来源：https://stackoverflow.com/questions/75941207/im-trying-to-use-a-gradient-to-produce-a-fade-effect-to-the-edges-of-my-image

1条答案

按热度按时间

o8x7eapl1#

最后我不得不稍微改变一下我的概念。我去掉了整个页面的背景图像和蒙版，只是让页面背景变成白色，没有蒙版。然后我使用了Blur the edges of an image or background image with CSS的解决方案
我的代码看起来像这样：
联系我们

<div class="img-contain">
    <img src="http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg">
    <div class="block"></div>
</div>

css：

.img-contain {
    margin: auto;
    width: 100%;
    margin: auto;
    position: relative;
}

.img-contain img {
    width: 100%;
    height: auto;
}

.block {
    width: 100%;
    position: absolute;
    bottom: 0px;
    top: 0px;
    box-shadow: inset -0px -0px 20px 20px white;
}

赞(0）回复(0）举报 2023-04-08

我来回答

css 我尝试使用渐变来产生图像边缘的淡入淡出效果,为什么不起作用？

1条答案

相关问题

热门标签

最新问答