Question

挑战在于，从我的CMS（让WordPress成为参数的原因），我可以为页面上横幅的背景图像获得不同的裁剪大小。这些作物尺寸是针对不同屏幕尺寸（基于手机，平板电脑，笔记本电脑等）生成的。

我希望能够将所有不同的裁切尺寸图像URL作为属性呈现到横幅DOM元素上，然后在外部CSS文档中使用媒体查询来选择要显示的正确内容。我要这样做的原因是，我可以编写PHP以在不同页面上动态提供裁剪后的图像。

类似HTML的

<div style="background-image:url('/img/sm-background-image.jpg')"
   md-background-image="url('/img/md-background-image.jpg')"> ...

CSS：

@media (min-width: 768px) {
    .background-image-style {
        background-image: attr('md-background-image')!important; /* All screen sizes above the smallest and default size */
    }
}

因此，所有768px或更大的屏幕宽度都将显示md-background-image属性中提供的图像，而小于此尺寸的任何内容都将显示background-image属性中定义的默认style。

我可以看到attr()目前不支持background-image，尽管将来有一定范围，但是我现在不能使用它。

Answer 1

通过结合使用CSS var()方法和style属性，达到了预期的效果。

我的PHP代码如下所示：

<div class="banner-image" style="
        --xl-background-image:url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>');
        --lg-background-image:url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>');
        --md-background-image:url('<?php echo $image['sizes']['md_header_banner_wide']; ?>');
        background-image:url('<?php echo $image['sizes']['sm_header_banner_wide']; ?>')">

哪个呈现HTML：

<div class="banner-image" style="
        --xl-background-image:url('/wp-content/uploads/2019/02/Products-Header-1489x600.jpg');
        --lg-background-image:url('/wp-content/uploads/2019/02/Products-Header-1400x564.jpg');
        --md-background-image:url('/wp-content/uploads/2019/02/Products-Header-1024x413.jpg');
        background-image:url('/wp-content/uploads/2019/02/Products-Header-768x309.jpg')">

因此，我可以使用以下CSS和媒体查询组合在我的外部style.css文件中根据客户端的屏幕大小显示不同的图像：

@media (min-width: 768px){
    .banner-image {
        background-image: var(--md-background-image)!important;
    }
}
@media (min-width: 992px){
    .banner-image {
        background-image: var(--lg-background-image)!important;
    }
}
@media (min-width: 1200px){
    .banner-image {
        background-image: var(--xl-background-image)!important;
    }
}

我已经使用开发人员工具在Chrome＆FireFox（在Windows上）和Safari（在Mac上）上进行了检查，但没有发现任何可比性问题。

替代方法：

或者，当我在写上面的解决方案时，我意识到，一个较少的风险方法可能是将样式直接呈现到页面中。我想这只是将两种可能性分开的兼容性和/或编码标准的问题。

<style type="text/css"> 
    @media (min-width: 768px){
        .banner-image {
            background-image: '<?php echo $image['sizes']['md_header_banner_wide']; ?>'!important;
        }
    }
    @media (min-width: 992px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>')!important;
        }
    }
    @media (min-width: 1200px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>')!important;
        }
    }
</style>

使用attr（）

1 个答案: