0

首先，当我在 localhost 上开发时，我无法提供任何 URL 详细信息 - 目前。但是，希望通过下面我的清晰描述，您可以提供建议。:-)

我一直在尝试.header-wrap #header使用 Uplift 主题在我的 Wordpress 网站中定位图像。下面的代码可以正常工作，但是由于纵横比，图像位于标题下方，这意味着它的高度明显超过 160 像素。我也尝试过background sizing-background-position这些都没有提供正确的结果。我知道我需要引入媒体查询，但我首先需要让这个弯曲的图像在大屏幕上工作。

我需要图像直接位于标题徽标下方并定位在站点标题模板中，以便它适用于所有设备，但采用粘性标题，因此正文在图像下方滚动。

我提供了两个屏幕截图：第一个屏幕截图使用下面的代码，当前位于标题区域下方，另一个屏幕截图显示它在所有屏幕上的外观。

如果图像未针对特定形状进行定制，则以下代码将起作用。

所以，我需要图像保持固定，所以当用户向上或向下滚动时，页面的内容应该在图像下方滚动。

.header-wrap #header {
background-image: url(http://localhost/lps/wp-
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */

}

首选布局

使用代码插入的当前图像

4

1 回答 1

0

嗨，您需要媒体查询来响应您的图像背景可能是您必须生成不同的大小...

.header-wrap #header {
min-width:100%;
min-height:100%;
height:100%;
width:100%;
position:fixed;
top:0px;
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */

@media all and (max-width: 1080px) {
    .header-wrap #header{ left:-600px;}
}

@media all and (max-width: 980px) {
    .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 800px) {
    .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 768px) {
   .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 750px) {
   .header-wrap #header{ left:-380px;}
}

@media all and (max-width: 640px) {
    .header-wrap #header{ left:-280px;}
}

@media all and (max-width: 360px) {
    .header-wrap #header{ left:-180px;}
}

@media all and (max-width: 320px) {
    .header-wrap #header{ left:-160px;}
}

例如，现在您需要在此处调整媒体查询位置，但您必须在这里适应不同的设备...

于 2017-09-04T22:02:58.600 回答