html - 用渐变填充 div 的背景图像

Question

以下是我的 fiddle ，其中我试图将背景图像(位置居中)放入宽度设置为 100% 的 div，如果图像的背景宽度为 20px 并且用户屏幕为 100px，则图像不会在宽度方向上拉伸(stretch)，并且模糊的渐变部分会填充图像左侧和右侧的区域。请告诉我该怎么做？

http://jsfiddle.net/R6K5S/

#background {
  /* fallback */
  background-color: #2F2727;
  background-image: url(http://farm5.staticflickr.com/4004/4335972718_a491a3076d.jpgimages/radial_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
    width:100%;
        height:250px;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}

Answer 1

据我所知，这就是你所要求的，将其添加到 background 类中

box-shadow: inset 0 10px 10px 10px rgba(255,255,255,1);

使用上面的线来模糊边框，其实很简单。它不是透明的，它是一个白色的模糊边框，请同时针对所有浏览器对其进行优化。

.imageclass{
    position:absolute;
    top:50%;
    left:50%;
}

#background {
    background-color: #2F2727;
    background-image: url(http://farm5.staticflickr.com/4004/4335972718_a491a3076d.jpgimages/radial_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    width:100%;
    height:250px;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
    background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
    box-shadow: inset 0 10px 10px 10px rgba(255,255,255,1); // Here you asked for blurry Edge
}

<div id="background">
    <img class="imageclass" src="http://www.topcoder.com/wp-content/themes/tc-eoi-theme-v3.2/i/rss-small.png"/>   
</div>