SharePoint Online Classic：仅用CSS将Promoted Link磁贴尺寸增至275px

I feel your pain—getting SharePoint's Promoted Links tiles to behave exactly how you want can be a real battle! Let's dive into why your background-color: transparent isn't working and how to fix it.

1. Boost Selector Specificity #

SharePoint's default CSS often uses highly specific selectors that can override your custom styles. Try making your selector more specific by chaining parent classes to target the details box more precisely:

.ms-promlink-body .ms-tileview-tile-root .ms-tileview-tile-detailsBox {
    background-color: transparent !important;
    /* Add these if needed to clear any leftover styles */
    background-image: none !important;
    border: none !important;
}

If you can add a custom class to the web part container (e.g., custom-promoted-links), you can avoid !important entirely by using a more targeted selector:

.custom-promoted-links .ms-tileview-tile-detailsBox {
    background-color: transparent;
    background-image: none;
}

2. Check for Pseudo-Elements or Hidden Background Layers #

SharePoint sometimes uses pseudo-elements (like ::before or ::after) to create subtle background effects. Use your browser's dev tools (F12) to inspect the element—if you see a pseudo-element adding a background, target it directly:

.ms-tileview-tile-detailsBox::before {
    background: transparent !important;
}

3. Override Inline Styles #

Occasionally, SharePoint injects inline styles directly into the element, which take precedence over external CSS. If you see style="background-color: #hexcode;" on the div.ms-tileview-tile-detailsBox element, use a quick JavaScript snippet to force the override:

document.querySelectorAll('.ms-tileview-tile-detailsBox').forEach(el => {
    el.style.backgroundColor = 'transparent';
    el.style.backgroundImage = 'none';
});

4. Confirm CSS Loading Order #

Ensure your custom CSS loads after SharePoint's default stylesheets. If your CSS is loaded first, SharePoint's styles will overwrite yours. Check the "Sources" tab in dev tools to verify the order of stylesheet loading.

These tweaks usually resolve the transparency issue—let me know if any of them work for you!

内容的提问来源于stack exchange，提问作者Vanessa