1

我在背景颜色上设置背景图像时遇到问题：这是我的示例，以便您了解我的意思：JSFiddle

现在这是功能性 CSS 部分：

#tancan{
    background-color: #ebebeb;
    background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}

正如您在 JSFiddle 中看到的那样，背景图像重复出现。如果我使用 no-repeat 作为属性，图像就会消失。

另外，我希望背景图像向右浮动，并且图像是否应该大于包含的 div，如何使其按比例适合？- 就像你会<img/>使用width: 100%and使图像标签适合height: 100%？

我不想使用 HTML 图像标签，它会容易得多，但我不想使用它有几个原因。

4

3 回答 3

6

试试这个 - http://jsfiddle.net/vmvXA/17/

#tancan {
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}

并使背景图像不超过其父容器，您可以使用background-size: contain- http://jsfiddle.net/vmvXA/22/

于 2012-08-10T19:58:20.127 回答
2

您不能只添加no-repeatto background-image，因为background-image它是一个仅指图像本身的特定属性。如果您想在一个声明中添加所有内容，请设置background：

background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;

或将其全部分开，由您决定：

background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
于 2012-08-10T20:02:34.397 回答
2

这是小提琴。

    background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;

为了使代码更短，可以在一个属性中指定所有设置。这称为“速记属性”。

要使所有图片都适合它的父级，请添加 style 属性background-size:contain;。

更新了小提琴。

于 2012-08-10T20:02:45.503 回答