如何淡出图像的边？ [英] How to fade out sides of images?

问题描述

当您使浏览器更宽时，您会注意到图片的右侧和左侧以黑色淡出。

When you make the browser wider, you will notice that the right and left side of images is fading out in black.

我需要将相同的功能应用于我的画廊，但不知道。我找到了这个>> 链接 a>，但它只是一个水平线不知道如何附加到图像的两侧，并得到与链接相同的结果。

I need to apply the same feature on my gallery but have no idea. I have found the this >> link as well but its just a horizontal line not sure how to attach it to both side of images and make the same result as the link.

在注释中，超人提到我可以应用过滤器的图像，但问题是，如果我应用它在图像上如何调整大小，因为浏览器窗口可能是不同的大小，图片侧应该可调整到每个浏览器的大小。

In the comments, ultranaut mentioned that I can apply the filter on images but the question is that if I apply it on the images how to adjust the size, because browser windows might be in different size and the pictures side should be adjustable to every browser size.

推荐答案

这里有一种方法可以护理这只猫：

Here's one way to skin this cat:

HTML：

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt=""/>
</div>

CSS：

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    background: -webkit-linear-gradient(left, 
                rgba(0,0,0,0.65) 0%, 
                rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,0.65) 100%
    );
}

就我个人而言，我不是（语义上） code> fade div，我相信没有它可以有更聪明的方法来做同样的效果，但它会工作。

Personally, I'm not a huge fan of the (semantically) unnecessary fade div, and I'm sure there's probably a more clever way to do the same effect without it, but it'll work.

我只包括webkit前缀规则，如果你想获得合法的，你需要添加其他供应商的前缀。

I only included the webkit prefixed rule, if you want to get legit you'd need to add the other vendor prefixes.

Fiddle 此处。

更新：
如果图像只是作为背景使用，就像你的链接示例中的情况一样;渐变和图像都可以在包含元素的css上设置：

Update: If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;

  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, 
    rgba(0,0,0,0.9) 0%, 
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.9) 100%
  ),
  url(picture.jpg);
}

...

<div class="frame">
  Content...
</div>

少蠢，少蠢： new-style fiddle with vendor prefixes and everything。

Less muss, less fuss: new-style fiddle with vendor prefixes and everything.

这篇关于如何淡出图像的边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！