CSS 背景大图像想要加载更小的尺寸？

Question

我有一个大图像，我想将其设置为 div 的背景。但是图片比较大。在这里:

http://i.imgur.com/4apfI.png

在右侧它将包含文本。

如果不用 css 加载这么大的图片，我该怎么做呢？

Answer 1

如果您想在图像顶部添加纯文本，您可以使用定位将子元素放置在正确的位置:

HTML--

<div>
    <span>Text Goes Here</span>
</div>

CSS--

div {
    position   : relative;
    background : transparent url(http://i.imgur.com/4apfI.png) 0 0 no-repeat;
    width      : 530px;
    height     : 128px;
}
div span {
    position : absolute;
    top      : 20px;
    right    : 20px;
    width    : 330px;
    height   : 80px;
    overflow : hidden;
}

这是一个演示:http://jsfiddle.net/XhJZW/

更新

您的图像非常简单，您可以像这样使用 CSS 渐变重新创建它:

HTML--

<div>
    <span class="left"></span>
    <span class="right"></span>
    <span class="content"></span>
</div>

CSS--

div {
    position : relative;
    width    : 530px;
    height   : 128px;
}
div .left, div .right {
    position : absolute;
    border   : 1px solid #a5a5a5;
    
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(188,188,188,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(99%,rgba(188,188,188,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc',GradientType=0 ); /* IE6-9 */
}
div .left {
    top     : 0;
    left    : 0;
    width   : 165px;
    height  : 108px;
    z-index : 2
}
div .right {
    top     : 6px;
    left    : 143px;
    width   : 350px;
    height  : 97px;
    z-index : 1;
}
div .content{
    position : absolute;
    top      : 15px;
    right    : 45px;
    width    : 300px;
    height   : 80px;
    overflow : hidden;
    border   : 1px solid #000;
    z-index  : 3;
}

这是一个演示:http://jsfiddle.net/XhJZW/3/

上面的 CSS 大约是 2KB。大约四分之一的 PNG 图像。

请注意，浏览器会根据浏览器支持的内容以不同方式呈现渐变和 border-radius。最旧的浏览器只会看到几个灰色框彼此重叠(没有圆 Angular ，也没有渐变)。