Question

http://mooytees.net/ups-index.html

调整浏览器大小，您将看到我的问题：当浏览器变小时，标题中的图像会重叠。 MAIN问题是我在雅虎商店编辑器（现在是aabaco小企业）工作，并且无法访问HTML来更改它。我知道标题的ID是#header（duh），所以我正在使用它。该网站使用RTML编写的模板，我不知道如何/害怕改变这些模板。请帮忙！

这是我的CSS。我知道没有HTML很难但是没有很多我能做的任何事情（至少，我认为没有）。

#header{
background-color: #351e16;
background-image: url(http://site.mooytees.net/ups-header-left.png), url(http://site.mooytees.net/ups-header-right.png);
background-position: left top, right top;
background-repeat: no-repeat;
min-width: 25%;

}

h3{
opacity:0;
height: 175px;
}

#header .searcharea{
display: none;
}

Answer 1

您可以使用媒体查询修复它，我使用该查询删除“UPS”图像，但您可以根据需要使用它。

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/4svoebdm/

修改以下是更改尺寸https://jsfiddle.net/DIRTY_SMITH/4svoebdm/1/

的示例

@media (max-width: 800px){
 #header {
  background-image: url(http://site.mooytees.net/ups-header-right.png);
  background-position: left top;
} 
}

Answer 2

您可以使用@media query解决此问题，以便在较小的屏幕尺寸上应用特定样式。

由于示例中的图片是背景图片，因此请先将此属性添加到#header

#header {
    background-size: contain;    
}

然后，在文件末尾放置一个媒体查询，以便在小屏幕上缩小标题

@media (max-width: 800px) {
    #header {
        height: 100px !important;
    }
}

调整浏览器大小时左右标题背景图像重叠

2 个答案: