Question

我正在使用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;
}

Answer 1

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

很少有网站会这样做，您可能需要重新考虑并使用固定大小的图片。

Answer 2

如果使用预处理功能，则应该能够根据您选择的图像设置页眉和页脚的类。您必须为不同的类创建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;
}

希望这有帮助。

Answer 3

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

正如您所发现的，如果您的标题div没有内容，您必须明确地将标题的大小设置为所需的尺寸，可以是最初发布的CSS（推荐），也可以是具有正确尺寸的空白块（除少数情况外不推荐）。

Drupal主题 - 没有尺寸约束的背景图像

3 个答案: