Question

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

#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);
  }

背景图片用渐变填充div

2 个答案: