我有一个WordPress网站, 在其中使用的标题图片在桌面上效果很好:http://fortyfourth.co.uk
但是, 在移动设备上, 图像根本无法正常工作。
是否可以仅将自定义标题图片用于移动设备?我对WordPress(以及与此有关的任何编码元素)非常陌生, 因此, 如果可以的话, 如果你能告诉我在何处以及如何添加自定义代码, 那将是很棒的。
谢谢, 瑞安
#1
在网站的移动视图中, 标题图片看起来不错, 但是如果你要在页面中使用其他背景图片, 请使用以下CSS规则:
@media screen and ( max-width: 425px ){
.page-id-155 .ewf-header-image-option{
background-image: url("http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png") !important;
max-height: 150px !important;
background-position: 49% 0px !important;
}
}
代替此http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png使用新图像的完整URL。
在这一行中, 我们定义了何时更改图像:@media屏幕和(max-width:425px){。 max-width:425px表示宽度小于425px的所有屏幕。你可以根据需要更改宽度。
max-height:150px!重要意思是, 图像高度部分不会超过150像素, 你可以根据需要更改150像素的高度。
关于背景知识, 你可以在这里学习。
代码转到自定义->其他CSS。
#2
我尝试使用CSS完全按照书面规定和几种变体进行了尝试, 但无济于事。
我最终使用了https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/
我最终不得不重新调整备用图像的大小, 这导致页面上的其余图像被缩放。但是我认为我有解决方案。
我希望这有帮助。
来源:
https://www.srcmini02.com/64295.html