Z-indexと透明度を含むCSSスタイルのエフェクト

Question

ここではスニペットに近いデザインを実現しようとしています。私の問題は、青色の背景である.titleを単純な透明度で置き換える方法を見つけることができないということです（コンテナの背景が見えるように）。青い背景を削除するだけで、境界線が表示されます（.title）。

また、「タイトル」はJSによって生成されるため、divの長さは状況によって多少異なる場合があります。

.container { 
 
    width: 350px; 
 
    height: 250px; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: relative; 
 
    background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg'); 
 
} 
 

 
.zone { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    margin: 0 0 20px 0; 
 
    text-align: center; 
 
} 
 

 
.title { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t z-index: 10; 
 
} 
 

 
.title span { 
 
    display: inline-flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t padding: 0 10px; 
 
\t height: 20px; 
 
\t color: hsla(200, 70%, 20%, 1); 
 
\t cursor: default; 
 
\t background: hsla(200, 70%, 55%, 1); 
 
} 
 

 
.content { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    padding: 30px 30px 20px 30px; 
 
\t width: 200px; 
 
\t border: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
\t border-radius: 0rem; 
 
\t margin-top: 10px; 
 
}

<div class="container"> 
 
    <div class="zone"> 
 
    <div class="title"> 
 
     <span>Text Title</span> 
 
    </div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

誰もが私がやろうとしているものを達成するためにどのようなアイデアを持っていますか？私の説明があまりにも短くて不明な場合は教えてください。

ありがとうございました！

Answer 1

これは擬似要素で実現できます。これを見てください：

.container { 
 
    width: 350px; 
 
    height: 250px; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: relative; 
 
    background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg'); 
 
} 
 

 
.zone { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    margin: 0 0 20px 0; 
 
    text-align: center; 
 
} 
 

 
.title { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t z-index: 10; 
 
} 
 

 
.title span { 
 
    display: inline-flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t padding: 0 10px; 
 
\t height: 20px; 
 
\t color: hsla(200, 70%, 20%, 1); 
 
\t cursor: default; 
 
} 
 

 
.title span::before, 
 
.title span::after{ 
 
    content: ""; 
 
    height: 2px; 
 
    position: absolute; 
 
    background: hsla(200, 70%, 20%, 1); 
 
    width: calc(50% - 40px); 
 
    top: 9px; 
 
} 
 

 
.title span::before{ 
 
    left: 0; 
 
} 
 

 
.title span::after{ 
 
    right: 0; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    padding: 30px 30px 20px 30px; 
 
\t width: 200px; 
 
\t border-right: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
    border-left: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
    border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
\t border-radius: 0rem; 
 
\t margin-top: 10px; 
 
}

<div class="container"> 
 
    <div class="zone"> 
 
    <div class="title"> 
 
     <span>Text Title</span> 
 
    </div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

Answer 2

あなたはより多くの要素

.container { 
 
    width: 350px; 
 
    height: 250px; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: relative; 
 
    background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg'); 
 
} 
 

 
.zone { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    margin: 0 0 20px 0; 
 
    text-align: center; 
 
} 
 

 
.title { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t z-index: 10; 
 
} 
 

 
.title__text { 
 
    flex: 0 0 auto; 
 
\t padding: 0 10px; 
 
\t height: 20px; 
 
\t color: hsla(200, 70%, 20%, 1); 
 
\t cursor: default; 
 
/* \t background: hsla(200, 70%, 55%, 1); */ 
 
} 
 

 
.title__border { 
 
    flex: 1; 
 
    border-top: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
} 
 

 
.content { 
 
    position: relative; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    padding: 30px 30px 20px 30px; 
 
\t width: 200px; 
 
\t border: 0.1rem solid hsla(200, 70%, 20%, 1); 
 
    border-top: 0.1rem solid transparent; 
 
\t border-radius: 0rem; 
 
\t margin-top: 10px; 
 
}

<div class="container"> 
 
    <div class="zone"> 
 
    <div class="title"> 
 
     <span class='title__border'></span> 
 
     <span class='title__text'>Text Title</span> 
 
     <span class='title__border'></span> 
 
    </div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

そして.title spanのようなセレクタを使用していないを追加することにより、所望の効果を得ることができます。彼らは特定の要素を対象とせず、それらによって使用されるスタイルは他のどこかで再利用することができません。これはコードの重複を招きます。要素セレクタ（.title spanなど）は、コードを変更するとき（異なるスタイルの別のスパンを追加するのは難しい）、さらに重複したコードを意味するときはいつでも問題を引き起こす可能性があります（.title要素のすべてのスパンを選択しています）。重複コード=より複雑なコード=保守が難しいコード！

あなたはget BEMまたはSMACSSまたは他の方法論を使用する必要があります（自分で作成することもできます）。あなたが代わりにdiv要素の伝説にフィールドセットを使用しようとすることができ

Answer 3

：

https://jsfiddle.net/v9p60p6g/1/

<html> 

<head> 
    <style> 
    .container { 
     width: 350px; 
     height: 250px; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     position: relative; 
     background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg'); 
    } 

    fieldset { 
     border: solid black 2px; 
    } 

    legend { 

    } 

    </style> 
</head> 

<body> 
    <div class="container"> 
    <fieldset> 
     <legend>Testtitel</legend> 
     Content 
    </fieldset> 
    </div> 

</body> 

</html>