Question

我正在尝试设计一个能够快速响应的电子邮件，而不是在电子邮件客户端中打开垃圾箱。所以这提出了一系列限制：

没有背景尺寸/定位
没有负利润
没有位置属性
无显示属性
不想使用表格

有关Gmail的更完整的限制列表，请访问：https://www.campaignmonitor.com/css/

现在我必须使用不会达到div大小的图像，需要按比例放大或缩小以覆盖背景。我还需要放置一个黑色覆盖层，以便即使在白色背景上也可以看到白色文本。我试图接近但没有找到一种方法来获得背景图像来覆盖整个div。这是我最近的尝试：

#background{
    background-image: url(http://placehold.it/320x400); 
    background-position:50% 50%; /*not allowed*/
    background-size:cover; /*Not allowed*/
    margin:5px; 
    max-height:400px;
    max-width:320px; 
    width:100%; 
    height:100%; 
    z-index:0; 
    float:left; 
}
#overlay{
    background: rgba(0,0,0,.35); 
    height:100%; 
    width:100%; 
    max-height:400px;
}
#cat{
    padding:10px; 
    font-size:10px; 
    letter-spacing:.5em; 
    text-transform:uppercase; color:white;
}
#title{
    font-size: 20px; 
    max-width: 243px; 
    padding:10px 200px 340px 10px; 
    vertical-align:bottom; 
    letter-spacing:0; 
    text-transform:uppercase; 
    word-wrap:break-word; 
    overflow: auto; /*hidden isn't allowed!?*/
    font-family: &quot;Oswald&quot;, Arial, sans-serif; 
    color:white;
}


<body>
    <div style="display:flex;">
        <div id="background">       
            <div id="overlay">
                <div id="cat">category</div>
                <div id="title">title</div>
            </div>
        </div>
    </div>
</body>

http://jsfiddle.net/r0zk02eh/

我或多或少地认为这是不可能的，但是我很想被证明是错的。

覆盖电子邮件的div

0 个答案: