如何删除图像底部的黑线 已修复

编程问答 2022-06-12

问题描述

链接到帖子底部的网页和截图

我正在使用WP-bakery插件重建网页。原始网页没有任何问题。当我尝试在新网页上使用相同的CSS时，图像底部有黑线。这些图像是指向其他页面的超链接，但黑线不是在文本下方形成，而是在文本所在的图像下方形成。我通过在超链接上添加新边框并在文本下方显示新行的方式对此进行了测试，所以这不是问题。我认为这与不正确的边距和填充有关，但是我不知道哪里出了问题。这是我在两个网站上使用的CSS文件：

.entry-content a img,.entry-content a,.entry-content a img:hover,.entry-content a:hover {
    Box-shadow:none;
}

.header-sticky-hide,#colophon,#masthead {display:none !important;}

#content {margin:0;padding:0;}

.keuze-txt   {  margin-top: -75%;
    text-shadow: 3px 3px 4px rgba(0,0.35);
    font-weight: 700;
    color: #fff!important;
    position: absolute;
    z-index: 99;
    text-align: center;
}

.keuze-txt  p {
    width: 75%;
    margin: 0 auto;
}

.keuze-txt a,.keuze-txt strong {
    color:#fff !important;
}

.keuze-txt a {
    line-height:100px;
    padding:10px 15px;
    color:#fff;
}

.kraam .keuze-txt a {
    background:#b8ccea 
}

.ack .keuze-txt a {
    background:#ecc8cd  
}

.baker .keuze-txt a {
    background: #ffbe9f  
}

.keuze-txt em {
    font-size: 0.5em;
    font-style: normal;
}

.keuze-img {   
    margin-top: -130%;
    margin-bottom: 0;
    position: absolute;
    z-index: 999;
    margin-left: 33%;
    border: transparent;
}

.keuze-bg {
    max-height: 100vh;
}

.keuze-bg {
    max-height: 100vh;
}

.keuze-bg img{
    opacity:0.3;
}

.keuze-col:hover .keuze-bg img{
 opacity:1;   
}

@media screen and (max-width: 768px) {
    .keuze-img {
        margin-top: -160%;
        margin-left: 25%;
    }

    .keuze-txt {
        margin-top: -90%;
    }

    .keuze-txt p {
        width:90%;
    }
}

这是HTML：

[vc_row full_width="stretch_row_content_no_spaces" full_height="yes" css=".vc_custom_1600777042471{background-position: 0 0 !important;background-repeat: repeat !important;}"]
[vc_column width="1/3" el_class="keuze-col kraam" css=".vc_custom_1600778593155{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #b8ccea !important;}"]
[vc_single_image image="1208" img_size="full" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-bg" css=".vc_custom_1600778060038{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_single_image image="1225" img_size="large" alignment="center" onclick="custom_link" link="https://www.kraamenco.nl/" el_class="keuze-img" css=".vc_custom_1600777981827{padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;padding-left: 0px !important;}"]
[vc_column_text el_class="keuze-txt"]



Kraam & Co staat voor professionaliteit,betrouwbaarheid en jarenlange ervaring op het gebied van kraamzorg in Abcoude en omstreken.


Ga naar Kraam & Co »

[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col ack" css=".vc_custom_1600778027984{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ecc8cd !important;}"]
[vc_single_image image="1209" img_size="full" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-bg"]
[vc_single_image image="1214" img_size="large" alignment="center" onclick="custom_link" link="https://www.zorgmaat.nl/home/" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]


Elke baby is uniek,geen bevalling is gelijk. De kraamverzorgenden van Ack Zorgmaat Kraamzorg zijn erin gespecialiseerd om een kraamtijd tot een heerlijk begin te maken van de nieuwe fase in uw leven.

Ga naar Ack Zorgmaat Kraamzorg »

[/vc_column_text][/vc_column][vc_column width="1/3" el_class="keuze-col baker" css=".vc_custom_1600778043514{padding-top: 0px !important;padding-bottom: 0px !important;background-color: #ffbe9f !important;}"]
[vc_single_image image="1210" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-bg"]
[vc_single_image image="1228" img_size="full" alignment="center" onclick="custom_link" link="https://www.debaker.nl/home" el_class="keuze-img"]
[vc_column_text el_class="keuze-txt"]


Met ruim 30 jaar ervaring in de kraamzorg weten we waar we het over hebben. Van degene die het intakegesprek met je voert tot aan ons management: kraamzorg zit in onze genen.

Ga naar De Baker Kraamzorg »

[/vc_column_text][/vc_column][/vc_row]

问题可能来自何处？我花了3个小时查看它，并多次重建了页面，但是我找不到问题。
链接
正常运行的网页：
https://www.zorgmaat.nl/

Screenshot of error

已修复

将此添加到WP-bakery中的自定义CSS中，问题现在似乎消失了。 .colors-custom .entry-content a,.colors-custom .entry-summary a,.colors-custom .comment-content a,.colors-custom .widget a,.colors-custom .site-footer .widget-area a,.colors-custom .posts-navigation a,.colors-custom .widget_authors a strong { -webkit-Box-shadow: none; Box-shadow: none; }

解决方法

我刚刚检查了您的网站和以下页面。 https://www.zorgmaat.nl/

您的盒子阴影有问题。如果要删除或更改颜色，只需更改此代码即可。将您的颜色代码放入RBG区域。

box-shadow: inset 0 -1px 0 rgb(37 32 32);

要完全删除它，请将其设置为无。

box-shadow: none;

希望这对您有用。

谢谢

htmlwordpress-themingwpbakery