在CSS中隐藏边框的一部分? [英] Hide part of a border in CSS?

问题描述

对于带有标题的面板，我有一些简单的CSS类.当背景是固定颜色时，它的效果很好，因为我必须使用该颜色将标题文本后面的边框隐藏起来.但是，我现在要有背景图像而不是纯色.

I have a few simple CSS classes for a panel with a header. It works great when the background is a fixed color because I have to use that color to hide the border behind the header text. However, I now want to have a background image instead of a solid color.

是否有一种方法可以使标头元素遮盖父元素的边框并允许背景图像显示出来?我可以轻松地将颜色设置为transparent，但是我什么都没有发现的内容将覆盖纯色或图像以外的边框.

Is there a way to have the header element cover up the parent element's border AND allow the background image to show through? I can easily set the color to transparent, but nothing I've found will cover the border other than a solid color or image.

我有一种预感，可以用JS来完成，并重新使用图片作为标题的背景，并根据页面上的位置设置一些偏移量，但这似乎过于复杂，并且对我来说不起作用'想说明形成图案或固定附件的几层分层背景图像，而这些图像必须不断地重新计算.

I have a hunch it could be done with JS and reusing the image as the background of the header and setting some offsets based on the position on the page, but that seems overly complicated, and won't work for me since I'd like to account for several layered background images forming a pattern, or fixed attachment which would constantly have to be recalculated.

有没有办法做到这一点?

Is there a way to do this?

.panel {
    border: 2px solid #000000;
    padding: 1em;
    margin: 1em;
    display: block;
}

.panel-header {
    position: relative;
    top: -1.5em;
    background-color: #ffffff;
    padding-left: 0.4em;
    padding-right: 0.4em;
    font-size: 1.2rem;
    font-weight: bold;
}

.panel-content {
    margin-top: -0.5em; 
}

<div class="panel">
  <span class="panel-header">
    Title Goes Here
    </span>
  <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
  </div>

<hr/>

<div style="background-image: url(http://placekitten.com/510/200); padding: 2em;">
  <div class="panel">
    <span class="panel-header">
      Title Goes Here
      </span>
    <p class="panel-content">Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>
    </div>
</div>

推荐答案

这是您需要的示例:

首先，您需要一个带有背景的容器div(在此示例中，我从互联网上获取了一个容器).

Firs of all, you need a container div with your Background (i've grabbed one from internet for this example).

此后，您需要使用HTML中的和代码段.

After this, you need to use and snippets from HTML.

您的CSS

div {
    padding: 30px;
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkAuRoZnkLBZlEYtgL5GJ5w_2Tufpxh5PqkOf-Negy7eL-JGC5Mk-DW-I) no-repeat  center center;
    background-size: cover;
}

fieldset {
    border: 2px solid black;
    padding: 10px;
}

您的HTML

<div>
 <fieldset>
  <legend>Personalia:</legend>
  <p>some text here</p>
 </fieldset>
</div>

在这里您可以看到小提琴

Here you can see the Fiddle

这篇关于在CSS中隐藏边框的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！