0

我使用 zen 作为基本主题来为我的网站制作一个新主题。问题是我希望页眉和页脚的背景图像在我为它们指定高度和宽度之前不会显示。此外，#header 和 #footer 内的 CSS 中指定的高度和宽度必须与原始图像（尺寸很大），否则图像无法正确显示（其中部分被剪切）。是否有解决方案（使用 CSS 或 PHP）可以让我在没有任何尺寸限制的情况下为页眉和页脚编写 CSS，以便背景图像自行调整？页眉和页脚不包含任何块。CSS的一部分如下：-

#header
{   
          background-image:url(images/header.jpg);
          background-repeat:no-repeat;
          height:
          background-position:center;
}

#footer
{
        margin-top:0px;
        background-image:url(images/footer.jpg);
        height:391px;
        background-position:center;
}

#footer-inner
{
        text-align:center;
        padding:4px 10px 10px 10px;
}
4

3 回答 3

1

如果您希望图像自动缩放，您需要img为每个图像使用一个标签，并将宽度/高度设置为 100%。这将自动将它们缩放为与其父容器相同的大小。这意味着如果您希望图像根据浏览器窗口的大小进行缩放，您需要将父容器的宽度/高度设置为百分比，而不是固定的像素宽度/高度。

很少有网站会做这种事情，您可能需要重新考虑并使用固定尺寸的图像。

于 2009-12-26T22:07:09.517 回答
0

如果您使用预处理功能，您应该能够根据您选择的图像为页眉和页脚设置一个类。不过，您必须为不同的类创建 CSS 以匹配图像。

例如：

预处理函数

function themename_preprocess_page($vars) {
  $classes = array('image1', 'image2', 'image3');

  $vars['header_class'] = array_rand($classes);
}

CSS

#header .image1 {
  background-image: url(path/to/image.jpg);
  height: [imageheight] px;
  width: [imagewidth] px;
}

希望这会有所帮助。

于 2009-12-28T21:11:46.653 回答
0

CSS 中的背景图像旨在将它们自己显示在它们所在的 div 的背景中。这意味着 div 的大小决定了您看到的图像的范围。在您的情况下，由于您的标题区域没有内容，因此 #header 在 layout.css 中设置了默认尺寸。

正如您所发现的，如果您的标题 div 没有内容，则必须将标题的大小显式设置为所需的尺寸，无论是在您最初发布的 CSS 中（推荐）还是使用具有正确尺寸的空块（不推荐）除非在极少数情况下）。

于 2010-01-06T13:50:01.443 回答