使用背景图像的框架

时间:2011-07-04 18:36:03

标签: html css image frame

我在我的图片中放了一个框架。

我为背景创建了一个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中看到的那样,框架的大小是错误的..她需要随图像一起增长并有一个填充。

谢谢大家的帮助。

2 个答案:

答案 0 :(得分:2)

你几乎拥有它!只需设置background-size;

的两个维度
background-size: 100% 100%;

http://jsfiddle.net/vLBXH/

答案 1 :(得分:0)

您无法在CSS,AFAIK中为背景图像设置宽度和高度。如果使用固定宽度图像(PNG),则还应该具有匹配大小的图像。另一种方法可能是仅使用CSS设置框架样式,或者在链接图像周围设置框架标记,然后可以设置样式,如:

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