背景图像用渐变填充div

Question

以下是我的小提琴，我试图将背景图像（位置居中）放到宽度设置为 100% 的 div 中，如果图像的背景宽度为 20px 并且用户屏幕为 100px，那么我想要图像不会拉伸宽度，模糊渐变部分会填充图像左右部分的区域。请告诉我该怎么做？

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>