Question

我在网页上的图片上创建了一个叠加层，并尝试在图片上添加文字。叠加层出现，红色背景（用于测试它是否真的有效）也是如此，但出于某种原因，当我使用内容时，我无法获得数据内容：attr。

.container{
    max-width: 1320px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    padding-top: 10vh;
}



.container ul{
    font-size: 0;
    text-align: center;
}

.container ul{
    margin: 0 auto;
    display: table;
}

#work li{
 padding: 10px;   
}

.container li{
    display: inline-block;
}



.overlay{
    position: relative;
    width: 400px;
    height: 400px;
}

img{
    width: 100%;
    vertical-align: top;
}

.overlay:after, .overlay:before{
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.overlay:after {
    content: '\A';
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
}

.overlay:before {
    content: attr(data-content);
    width:100%;
    /*font-size: 200%;*/
    color:#fff;
    z-index:1;
    padding:30px 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align:center;
    background: red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    vertical-align: middle;
}

.overlay:hover:after, .overlay:hover:before{
    opacity: 1;  
}

以下是我的http://jsfiddle.net/1sh5jy31/

Answer 1

您需要指定font-size

http://jsfiddle.net/42soytjc/

.overlay:before {
    content: attr(data-content);
    width:100%;
    /*font-size: 200%;*/
    color:#fff;
    z-index:1;
    padding:30px 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align:center;
    background: red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    vertical-align: middle;
    font-size:30px;
}

将鼠标悬停在图片上时，数据内容不会显示

1 个答案: