Question

此刻修复现有网站。用户报告了包装图像的链接实际包装整个父div的问题。

我在这里创建了一个示例：http://jsfiddle.net/WW3bh/25913/

＆＃13;

.img-span {
  display: block;
  width: 100%;
  /*position: relative;*/
}

.img-span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  background-color: transparent;
  transition: all .3s ease
}

.img-span:hover:after {
  background: rgba(0, 154, 228, 0.6)
}

＆＃13;

<div class="wrap">
  <h1>Test Page</h1>
  <div class="rich-text-editor">
    <div class="wrap">
      <p>
        and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing
        a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees,
        and but a few stray gleams steal into the inner s
      </p>
      <a href="http://google.com">
        <div class="image-wrap">
          <span class="img-span">
          <img alt="" src="http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
        </span>
        </div>
      </a>
      <p>
        odo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutr
      </p>
    </div>
  </div>
</div>

＆＃13;

这＆＃34;：＆＃34;部分我不完全明白。我知道它会在容器中创建伪元素，但不能理解顶部/左/右/底部。

将宽度和高度设置为.image-wrap div将解决此问题，但这需要始终在img标记周围包装。

我希望找到另一种方法来创建一个不会回复其父级宽度和高度的图层，而不是孩子。

根据上述css代码，有没有人能解释如何计算后区的高度和宽度？

修改

现在理解上/左/右/下只是将宽度和高度定义为100％（为什么他们只使用宽度高度100％？）

理解问题是img-span有位置：静态，这就是为什么img-span：在没有将它视为父级之后，而是找到了父级。如果将img-span设置为相对位置，问题就会消失。不是CSS的专家，这会导致任何副作用吗？

~~注意：在我的电脑上，jsfiddle中的前几条css行不会应用于html，这对我或每个人来说都是一个错误吗？~~默认情况下误导Jsfiddle评论符号在CSS＆＃34; //＆＃34; ...

Answer 1

.img-span:after在.img-span元素中创建一个伪元素。

以下CSS规则

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

将:after伪元素拉伸到其父元素的宽度/高度。

.img-span 可能不是父元素，因为position: absolute与position: relative，position: absolute遇到的第一个父元素相关，或position: fixed。

Answer 2

：作为其添加元素的子元素。有顶，如果您有高度，则left，right和bottom等于0是相同的：100％和width：100％。在您的情况下，您可以将特定的高度和宽度设置为：伪类后。希望这会对你有所帮助:)。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px; 
width: 100px;

Answer 3

:after是一个孩子，无论它附属于什么。它的高度和宽度将根据其后的数据计算得出。因此，在这种情况下，将根据.img-span的高度和宽度计算您的后跟，并从那里开始，其高度将由其中包含的内容确定。

怎么样＆＃34;：＆＃34;元素的高度和宽度确定？

3 个答案: