背景图像使用渐变填充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> 

Answer 2

 img { /* To contain the image to the confines of the div */ max-width: 100%; } .hero-image { max-width: 100%; width: 800px; margin: auto; } .hero-image::after { display: block; position: relative; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%); margin-top: -150px; height: 150px; width: 100%; content: ''; } 

 <div class="hero-image"> <img src="http://fillmurray.com/400/359" /> </div> 

  body { background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow); background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow)); background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow); }