css - Wordpress 购物者标题很难

Question

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

我可以使用 CSS 为不同的显示器添加不同的图像吗？比如我可以在小于 424 像素的显示器上调用不同的标题图像吗？

文字叠加也太暗了，看不清楚。如何将标题文本外观调整为带有某种阴影的外观。我在 wordpress 上使用购物者主题。

对于 {} 屏幕{}@media only screen and (max-width:424px){your div css here .img{background-image: url("https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg ");}}

对于{}屏幕{}@media only screen and (max-width:800px){your div css here .img{background-image: url("https://beiiu.store/wp-content/uploads/2018/08/688963696-2048x2048.jpg ");}}

对于 {} 屏幕{}@media only screen and (max-width:1080px){your div css here .img {background-image: 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");
                   }
                }