Wordpress购物者标题很难找到

Question

我一整天都在尝试让wordpress购物者主题中的标题图像正确响应。图像正在调整大小以适应屏幕显示，但它正在调整为小的或两个大的。

有没有css我可以用来为不同的显示添加不同的图像。比如，我可以在小于424px的显示器上调用不同的标题图像吗？

文本叠加也太暗，不能很好地阅读。我如何调整标题文本外观到一个有某种阴影。我在WordPress上使用购物者主题。

对于{}屏幕{}@media only屏幕和（最大宽度：424px）{您的div css在这里。img{背景图像：url（“https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg");}}

对于{}屏幕{}@media-only屏幕和（最大宽度：800px）{您的div css在这里。img{背景图像：url（“https://beiiu.store/wp-content/uploads/2018/08/688963696-2048x2048.jpg");}}

对于{}屏幕{}@media-only屏幕和（最大宽度：1080px）{您的div css在这里。img{背景图像：url（“https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg");}}``

Answer 1

是的，使用“媒体”，您可以根据屏幕大小更改图像，如：

// for 424px screen
    @media only screen and (max-width:424px){
                   //your div css here
                   .img{
                      background-image: url("first.jpg");
                   }
                }
//for 800px screen
    @media only screen and (max-width:800px){
                   .img{
                      background-image: url("second.jpg");
                   }
                }
    //for 1080px screen
    @media only screen and (max-width:1080px){
                   .img{
                      background-image: url("third.jpg");
                   }
                }