Question

如何在css中的另一个图像上获取图像？我正试图在网格中的每个图像上方放置一个放大镜图标。

关于一个问题，如何摆脱我的CSS中的＃并将其更改为。

ul#grid {
  list-style: none;
  margin: 60px auto 0;
  width: 1200px; 
   }

#grid li span {
  display:inline;
  color: white;
  display:block;
  bottom:225px;
  position:relative;
  width:180px;
   }

#grid li {
  display:inline-block;
  position: relative;
  float: left;
  margin: 0 40px 75px 0px;
  display:inline;
  position:relative;
   }

#grid li a:hover img {
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opactiy .3s ease-in;
  -ms-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
  opacity: 1;
   }

#grid:hover li {
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opactiy .3s ease-in;
   -ms-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 0.3;
      }

 #grid li img {
   margin: 0;
   width: 339px;
   height: 211px;
   position:relative;
    }

#grid:hover li:hover {
  opacity: 1;
  }

#grid img::selection { background-color: transparent; }

#hidden{
  position:absolute;
  width: 1100px;
  height:670px;
  top:0px;
  z-index:-1;
  }

HTML

 <div class="portfolio">
  <ul id="grid">   
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
   <li><a href="#"><img src="http://collider.com/wp-content/uploads/steve-wozniak-image.jpg"><span>Woz!!!!!!!!!!!!</span></a></li>
 </ul></div>
<div id="hidden">

JSFIDDLE

Answer 1

你必须改变你的绝对位置。

Answer 2

将子位置更改为absolute，将父元素更改为relative，绝对或固定，而非静态。

Answer 3

第一个没有网格的示例并删除了＃reference。

＆＃13;

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

＆＃13;

<div class="portfolioitem">
  <a href="#">
    <img src="http://placehold.it/339x211" />
    <span>+</span>
  </a>
</div>

＆＃13;

http://jsfiddle.net/MxtSU/3/

使用网格的第二个示例，将图像和缩放图标放入网格中（在本例中为无序列表）：

＆＃13;

.portfolioitem {
  position: relative;
  width: 50%
}
img {
  width: 100%
}
span {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

＆＃13;

<ul>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
  <li>
    <div class="portfolioitem">
      <a href="#">
        <img src="http://placehold.it/339x211" />
        <span>+</span>
      </a>
    </div>
  </li>
</ul>

＆＃13;

http://jsfiddle.net/MxtSU/4/

css图像叠加（缩放图标）

3 个答案: