1

以下のようなタイムラインを作成するために、ul背景画像を持つ要素を作成し、各li要素に背景色を与えました。

ここに画像の説明を入力

以下のようなソースコード：

<style>
body{
    //background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-color: white;
}
</style>


<ul>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
</ul>

ただし、bodyなしでを設定すると、以下のようsolid background colorにul背景画像がli要素を突き破ってしまいます。

ここに画像の説明を入力

以下のようなソースコード：

<style>
body{
    background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-color: transparent;
}
</style>

以下のようなものを作ることは可能ですか？ ここに画像の説明を入力

ありがとう

4

5 に答える 5

0

でこれを行うことはできませんbackground: transparent。何かが透明な場合、 の背景線を含め、その下のすべてのレベルが表示されます<ul>。

fixed背景の使用に問題がなければ、HTML を変更せずにその効果を得ることができます。と に同じ背景を指定し、それぞれに of を指定bodyするspanだけbackground-attachmentですfixed。を使用fixedすると、2 つの背景が整列し、同じ背景の一部のように見えます。

<style>
body{
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    background-color: #001;
}
ul {
    background-image: url("AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: #001;
}
</style>

質問にコメントしたように、読みやすさを向上させるためにテキストを少し変更することをお勧めします。 このためcolor、上記の CSS には texttext-shadowと aが含まれています。background-color

于 2013-03-07T11:01:41.037 に答える
0

これが私の解決策です。別の要素を作成し、その背景をこの要素の背景として設定し、スパンの間に挿入します。

これは単純なトリックであり、機能しました。css でいくつかの調整が必要です。

CSS:ul li small { background: #CC0000; width: 100px; height: 20px; float: left; } ul li:first-child { width: 200px; } ul li:first-child small { background: #CC0000; width: 200px; } ul li:last-child small { width: 200px; } ul li:last-child small { background: #CC0000; width: 200px; }

html:<ul> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> </ul>

フィドルをチェックしてください:フィドル

于 2013-03-07T11:24:51.523 に答える
0

うーん、これはかなり難しそうですね。それは不可能だと思いますが、ある種の幻想を達成しようとすることは確かにできます。<hr>私の最初の考えは、 :after および :before 擬似要素を取り除き、いじることです。

各liの後に直線を追加します

li:after{
   background: white;
   content: "";
   width: 30px;
   height: 2px;
   top: 13px;
   right: -16px;
   position: absolute;
}

そして最初のものの前に1つ。

 li:first-child:before{
    background: white;
    content: "";
    width: 30px;
    height: 2px;
    top: 13px;
    left: -16px;
    position: absolute; 
}

http://jsfiddle.net/gleezer/8SKXy/1/を参照してください

まだ一種のハックですが、問題なく動作します。余分なマークアップはなく (すべての span タグを削除することもできます)、セマンティックは保持されます。

于 2013-03-07T10:51:10.943 に答える
0

元の質問への回答: いいえ、できません。私がすることは、HTMLを少し再配置することです:

<ul>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
</ul>

UL から背景画像を取得し、スパンに適用します。次のようになります。

span {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    display: inline-block;
    height:10px;
    width:80px;
    margin:0 3px;
}

完璧にするには、余白などをいじる必要があります

于 2013-03-07T10:32:45.537 に答える
0

HTML構造の変更を受け入れる場合は、これを試すことができます：

http://jsfiddle.net/MBNZ8/

li の変更:<li><span></span><div>20130307</div><span></span></li>

body{
    background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {


    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;



}
span {
   background-color: transparent;
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 13px;
    background-repeat: repeat-x;

    display: block;
    float: left;
    height: 20px;
    width: 31px;
}
div {
    float:left;
    }
于 2013-03-07T10:36:18.933 に答える