SharePoint Online Classic - 仅使用CSS将提升的链接切片大小增加到275px

Question

推广链接具有挑战性。我的问题似乎是div.ms-tileview-tile-detailsBox元素。如果我能在静止时让它变得透明，我的代码将是完美的＃34;是的，我尝试设置background-color：transparent。

这是我目前的代码，感谢任何帮助：

＆＃13;

＆＃13;

/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}

/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}

/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
}

/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
}

/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
}

/* title and description text */
.ms-tileview-tile-detailsListMedium {
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
}

.ms-tileview-tile-titleMediumCollapsed {
height: 275px;
overflow: hidden;
vertical-align: bottom;
top: 275px !important; 
}

/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
width: 275px;
height: 40px;
position: absolute;
top: 130px; 
left: 0px;
padding: 4px 7px;
font-size: 14px;
line-height: 17px;
background-color: rgba(0, 0, 0, 0.3);
}

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

我建议你提供进一步研究的截图。

以下CSS样式供您参考：

<style type="text/css">
/* tile row height */
.ms-promlink-body {
    height: 285px;
    width: 870px;
}

/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
    width: 285px !important;
    height: 285px !important;
}

/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
    width: 275px !important;
    height: 275px !important;
    background-color:#0072c6 !important;
}

/* image dimensions */
.ms-tileview-tile-content img {
    width:275px !important;
    height:275px !important;
    right:0px !important;
}

/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
    width: 275px !important;
    height: 275px !important;
    top:200px !important;
}

div.ms-tileview-tile-detailsBox:hover{
    width: 275px !important;
    height: 275px !important;
    top:0px !important;
}

/* title and description text */
.ms-tileview-tile-detailsListMedium {
    height: 275px;
    padding: 4px 7px 7px;
    font-size: 14px;
    line-height: 17px;
}

.ms-tileview-tile-titleMediumCollapsed {
    height: 275px;
    overflow: hidden;
    vertical-align: bottom;
    top: 275px !important; 
}

/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
    width: 275px;
    position: absolute !important;
    top: 10px; 
    left: 0px;
    padding: 4px 7px;
    font-size: 14px;
    line-height: 17px;
}
</style>