Question

我编写了一个非常适合我的代码。所以我的图片周围有一个（半）边框。像下面的图片。但是当我添加背景颜色时，线条消失了。

现在我想要相反的颜色，但因为我需要背景颜色。所以我这样做了，但现在边界不再显示。所以我想要一条橙色背景的白线。有3个文件。 CSS 文件、您可以在此处看到的 PHP 文件以及将它们组合在一起的文件。

我的 PHP/HTML

#about {
    background-color: #EF7F19;
    color: white;
}

#about .about {
    flex-direction: column-reverse;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}

#about .col-left {
    width: 250px;
    height: 360px;
}

#about .col-right {
    width: 100%;
}

#about .col-right h2 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    margin-bottom: 10px;
}

#about .col-right p {
    margin-bottom: 20px;
}

#about .col-left .about-img {
    height: 100%;
    width: 100%;
    position: relative;
    border: 10px solid #EF7F19;
}

#about .col-left .about-img::after {
    content: '';
    position: absolute;
    left: -33px;
    top: 19px;
    height: 98%;
    width: 98%;
    border: 7px solid white;
    z-index: -1;
}

@media only screen 
    and (min-width:768px) {
    #about .about {
        flex-direction: row;
    }
    
    #about .col-left {
        width: 600px;
        height: 400px;
        padding-left: 60px;
    }
    
    #about .about .col-left .about-img::after {
        left: -45px;
        top: 34px;
        height: 98%;
        width: 98%;
        border: 10px solid white;
    }
    
    #about .col-right {
        text-align: left;
        padding: 30px;
    }
    
    #about .col-right h1 {
        text-align: left;
    }
}

echo ' <section id="about">'; 
echo '   <div class="about container">'; 
echo '     <div class="col-left">'; 
echo '       <div class="about-img">'; 
echo '         <img src="'. $row[" AboutLocation "].'" 
                    alt="img">'; 
echo '       </div>'; 
echo '     </div>'; 
echo '     <div class="col-right">'; 
echo '       <h1 class="section-title" 
                    style="color: white;">Over ons</h1>'; 
echo '       <h2>Adisol</h2>'; 
echo '       <p>'. $row["AboutUsText"].'</p> '; 
echo '     </div>
            </div>
        </section>';

Answer 1

就像我在评论中所说的那样。使用 box-shadow 将是实现所需设计的更简单方法。这样你就不需要伪元素。您可以使用 2 个具有垂直和水平偏移的框阴影。

让我们通过代码看看它是如何工作的：

第一：你的图像需要一个边框。将边框指定为 white solid，并具有您喜欢的粗细。

2nd：我们需要一个橙色框架，我们将使用 box-shadow 属性和 2 个用逗号分隔的值来获得它。

3rd：让我们从第二个和最后一个值开始：-30px 30px 0 0 orange 第一个数字是水平偏移量，它将向左移动框架 30px。第二个数字是垂直偏移，它将框架移动到底部 30px。第三个数字是模糊值。使用 0 它将是纯色。第四个也是最后一个数字是大小。使用 0 时，它的大小与图片完全相同。

4th：为了防止整个阴影显示为橙色块，我们需要在其前面放置另一个框阴影值。我们给它相同的偏移和模糊值。但是，我们更改了第四个数字。我们将其更改为预期“框架”厚度的负值。在本例中，-10px 将使“框架”厚 10 像素。

img {
  width: 50%;
  float: right;
  border: 10px solid white;
  box-shadow: -30px 30px 0 -10px white,
              -30px 30px 0 0 orange;
}

/* for demonstration only */

img {
  margin-bottom: 100px;
}

<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">

添加背景颜色时不显示 CSS 边框

1 个答案: