图像下的HTML / CSS文本 [英] HTML/CSS Text under image

问题描述

以下是所需的样式：

这是jsfiddle链接：此处

HTML：
$ b

 < div class =photos> 
< ul> 
< li>< span>< a href =＃>< img src =http://cdn.androidbeat.com/wp-content/uploads/2013/07/android。 jpgwidth =200height =150/>< / a>< / span> 
< span> Android< / span> 
< a href =>查看更多...< / a> 
< / li> 
< li>< a href =＃>< img src =http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg width =200height =150/>< / a> 
< span> Android< / span> 
< a href =>查看更多...< / a> 
< / li> 
< li>< a href =＃>< img src =http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpgwidth = 200height =150/>< / a>< / li> 
< li>< a href =＃>< img src =http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof .pngwidth =200height =150/>< / a>< / li> 
< / ul> 
< / div> 
  

CSS：

  / *图片库显示* / 
 .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; * / 
不透明度：0.75; 
 -webkit-transition：全部为0.3s线性; 
 -moz-transition：全部为0.3s线性; 
转换：全部为0.3s线性; 
} 
 .photos ul li a：hover {
 opacity：1.0; 
} 
 
 .photos ul li a img {
 border：6px solid＃e1d9ec; 
} 
  

但问题是我无法使每个列表的背景颜色为白色项目（图像与下面的文本）任何帮助非常感谢。谢谢。

解决方案

小提琴

  .photos ul li {
背景：＃999; 
 display：inline; 
 list-style：none; 
 float：left; 
 margin-right：10px; 
 padding：0; 
 text-align：center; 
颜色：#fff; 
} 
  

或

  .photos ul li {
 background：#fff; 
 display：inline; 
 list-style：none; 
 float：left; 
 margin-right：10px; 
 padding：0; 
 text-align：center; 
颜色：＃000; 
} 
  

Below is the desired style:

This is the jsfiddle link: 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;
        } 

But the problem is I can't make the background color white for each list item (image with text underneath) Any help is much appreciated. thanks.

解决方案

Fiddle

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

or

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

这篇关于图像下的HTML / CSS文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！