Question

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

我是否可以使用CSS为不同的显示器添加不同的图像。像我可以在小于424px的显示器上要求其他标题图像吗？

文字叠加层也很暗，无法很好地阅读。如何将标题文本外观调整为带有某种阴影的外观。我在Wordpress上使用购物者主题。

对于{}屏幕 {} @仅限媒体屏幕和（最大宽度：424px）{您的div此处为CSS。img{background-image：url（“ https://beiiu.store/wp-content/uploads/2018/08/Depositphotos_171017402_original-1.jpeg”）;}}

用于{}屏幕 {} @仅限媒体屏幕和（最大宽度：800像素）{您的div此处为CSS。img{背景图像：url（“ https://beiiu.store/wp-content/uploads/2018/08/688963696-2048x2048.jpg”）;}}

对于{}屏幕 {} @仅限媒体屏幕和（最大宽度：1080像素）{您的div此处为CSS。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");
                   }
                }

WordPress的购物者标题很难

1 个答案: