使用背景图像的框架答案

【问题标题】：frame using a Background-image使用背景图像的框架
【发布时间】：2011-07-04 18:36:02
【问题描述】：

我在图像中放置了一个框架。

我为 background-image 创建了一个 CSS 是框架的图像，但是他必须有一个 x 填充才能看到框架。

img.frame
{
    background-image:url('http://bit.ly/k8g8zz');
    background-repeat:no-repeat;
    background-position: center;
    background-size: 100%;
    padding:23px 14px 60px;
}

我不能在另一个里面使用一个div，因为我需要这个图片是一个带有标题的链接，而W3C不能是一个div里面的标签。

如果可能，更改 jsFiddle 并将链接发送给我

请参阅complete code here。

正如您在 jsFiddle 中看到的那样，框架大小不正确.. 她需要与图像一起增长并具有填充。

感谢大家的帮助。

【问题讨论】：

标签： html css image frame

【解决方案1】：

你几乎拥有它！只需设置background-size的两个维度；

background-size: 100% 100%;

http://jsfiddle.net/vLBXH/

【讨论】：

【解决方案2】：

您不能在 CSS、AFAIK 中为背景图像设置宽度和高度。如果您使用固定宽度的图像 (PNG)，您还应该拥有匹配大小的图像。另一种方法可能是仅使用 CSS 设置框架样式，或者在链接图像周围添加一个框架标签，然后您可以对其进行样式设置，例如：

<div class="img_frame">
    <a href="#nohref"><imgr src="#noimg" /></a>
</div>

【讨论】：

我不能放入 div，因为我也有一个文本链接（请参阅链接 jsFiddle）
有一个应该是链接的元素，你放在 div 里面，每个人都会框架;