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。最古老的浏览器只会看到几个灰色的盒子（没有圆角，没有渐变）。

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

1 个答案:

更新