0

以下は希望のスタイルです。

ここ

これは jsfiddle リンクです: here

HTML:

   <div class="photos">
        <ul>
            <li><span><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"   /></a></span>
            <span>Android</span>
            <a href="">See More...</a>
            </li>
            <li><a href="#"><img src="http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg" width="200" height="150"  /></a>
            <span>Android</span>
            <a href="">See More...</a>
            </li>
            <li><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"  /></a></li>
            <li><a href="#"><img src="http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof.png" width="200" height="150"  /></a></li>
        </ul>
      </div>

CSS:

  /* gallery display */
        .photos {
          display: block;
        }

        .photos ul {
          list-style: none;

        }

        .photos ul li { 
            display: inline;
            list-style: none;
            float: left;
            padding: 0 10px 0 0;
            text-align:center; 
        }

        .photos ul li span a {
            background-color: #fff;
        }

        .photos ul li a {

          display: block;
          /*
          margin-right: 10px;
          margin-bottom: 7px; */
          opacity: 0.75;
          -webkit-transition: all 0.3s linear;
          -moz-transition: all 0.3s linear;
          transition: all 0.3s linear;
        }
        .photos ul li a:hover {
          opacity: 1.0;
        }

        .photos ul li a img {
          border: 6px solid #e1d9ec;
        }

しかし、問題は、各リスト項目の背景色を白にすることができないことです (下にテキストのある画像)。ありがとう。

4

4 に答える 4

0

私はあなたが次のことを望んでいたと仮定します：

  1. 各ブロックの背景を黒にするには、次のようにします: .photos ul li { background-color: #000; }

  2. 白いテキストは次のようになります: .photos ul li span { color: #fff; }

  3. .photos ul li { margin: 10px; で行うことができる白いギャップ。}

最後に、これを取得します: http://jsfiddle.net/vZ8eD/1/

/* gallery display */
.photos {
  display: block;
}

.photos ul {
  list-style: none;

}

.photos ul li { 
    display: inline;
    list-style: none;
    float: left;
    padding: 20px;
    margin: 10px;
    text-align:center; 
    background-color: #000;    
}

.photos ul li span {
    color: #fff;
}

.photos ul li a {

  display: block;
  /*
  margin-right: 10px;
  margin-bottom: 7px; */
  opacity: 0.75;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.photos ul li a:hover {
  opacity: 1.0;
}

.photos ul li a img {
  border: 6px solid #e1d9ec;
}
于 2013-09-16T05:38:10.673 に答える