60

私はいくつかのCSSに取り組んでおり、デザインではページタイトル（見出し）を中央に配置し、水平線を両側に垂直に配置する必要があります。さらに、ページには背景画像があるため、タイトルの背景を透明にする必要があります。

タイトルを中央に配置し、疑似クラスを使用して線を作成できます。しかし、タイトルのテキストと交差するときに行が消える必要があります。

単語がある場所で透明になる背景グラデーションを使用することを検討しましたが、各タイトルの長さが異なる可能性があるため、どこにストップを置くかわかりません。

これまでのCSSは次のとおりです。

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}

これが私がいる場所です：http： //jsfiddle.net/XWVxk/1/

これは、余分なHTMLを追加せずにCSSで実行できますか？

4

3 に答える 3

94

このhttp://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-editionを見てください。これがあなたの答えです。

これが変更された元のコードです

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>

注: この記事はもうオンラインではありません。最後の適切なアーカイブ バージョンは次のとおりです 。 -プレミア版

于 2013-03-21T20:42:49.520 に答える
1

これはうまくいくかもしれません：

.floatClear {
  clear: both;
}
#wrapper {
  text-align: center;
  position: relative;
}
#wrapper .line {
  border-bottom: 2px solid red;
  position: absolute;
  width: 100%;
  top: 15px;
}
#wrapper .textbox {
  position: absolute;
  width: 100%;
}
#wrapper .textbox .text {
  background-color: white;
  margin: 0px auto;
  padding: 0px 10px;
  text-align: center;
  display: inline;
  font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div class="line"></div>
    <div class="textbox">
      <div class="text">This is my Title</div>
    </div>
  </div>
</body>

</html>

ここで何が起こるかというと、テキストを背景の線の上に設定し、背景色とサイドパディングを使用して、テキストブロックの後ろの線を非表示にします。

于 2013-03-21T20:58:33.427 に答える