Question

我正在尝试将四个背景图像排列成一个侧面菜单面板，每个面板上都有四个文本链接。假设背景图像是最好的方法，我将背景图像应用于每个文本区域。我想知道的是，无论如何我可以让背景图像显示完整尺寸，以便我可以将文本对齐到正确的位置。

PAGE LINK：http://dbtest.destinationballybunion.ie/?page_id=4600

这是我尝试应用于前两个文本区域的CSS：

.boxera {
 background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-A.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.boxera p {
margin-top: 4.000em;
margin-right: 1.000em;
margin-left: 12.500em;
}

.boxerb {
 background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads   
/2014/11/NULEFT-B.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}

.boxerb {
position: absolute;
margin-top: -1.800em;
}

我尝试将最后两个文本区域放在特定维度上，但结果相同。

.boxerc {
 background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads 
/2014/11/NULEFT-C.png');
background-size: 16.000em auto;
background-repeat: no-repeat;
}

.boxerc {
 position: absolute;
 margin-top: 12.500em;
}

.boxerd {
 background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-D.png');
background-size: 29.688em 20.250em;
background-repeat: no-repeat;
}

.boxerd {
position: absolute;
margin-top: 26.500em;
}

任何人都可以帮助我。我试过看了这个，直到我付诸实践，这一切看起来都很简单！

Answer 1

我为boxera添加了高度和宽度，并调整了图像的大小。

所以例如

将相应的图片尺寸添加到：

div.wpb_text_column.wpb_content_element.boxera
div.wpb_text_column.wpb_content_element.boxerb
div.wpb_text_column.wpb_content_element.boxerc
div.wpb_text_column.wpb_content_element.boxerd

所以对于boxera

height:295px; width:475px;

这是我能想到实际改变背景图像的唯一方法，因为你已经在div中如此深刻地敲击了它。除非如上所述，否则你将它从CSS中剥离出来并放入一些图像标签，这是我认为唯一的另一种方式。

无法正确显示背景图像

1 个答案: