Question

问题：容器宽度为200px，图像可以有动态宽度（100px，120px，无论如何）

img :: after完全不起作用。

CREATE VIEW person_view
AS
SELECT p.person_id,
    t.address,  
    t.team_id
FROM person p 
-- if team name can be anywhere in the address:
JOIN team t ON p.address LIKE CONCAT('%', t.team_name, '%');
-- -- if team name will always be in front of address:
-- JOIN team t ON p.address LIKE CONCAT(t.team_name, '%');

我无法为.img-wrap设置宽度，因为它会破坏图像宽度。

我有什么选择？

Answer 1

您可以将以下CSS应用于img-wrap

.img-wrap {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

我已经更改了下面演示中的颜色，以便更清楚地显示:after。

＆＃13;

.wrapper {
  position: relative;
  width: 200px;
  border: 1px solid black;
}

.img-wrap {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 100%;
}

.img-wrap::after {
  display: block;
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 0, 0, 0.2);
}

＆＃13;

<div class='wrapper'>
  <div class='img-wrap'>
    <img class='img-responsive' src='http://via.placeholder.com/150x150' alt='' />
  </div>
</div>
<div class='wrapper'>
  <div class='img-wrap'>
    <img class='img-responsive' src='http://via.placeholder.com/120x120' alt='' />
  </div>
</div>
<div class='wrapper'>
  <div class='img-wrap'>
    <img class='img-responsive' src='http://via.placeholder.com/100x100' alt='' />
  </div>
</div>

＆＃13;

Answer 2

您可以在不使用伪元素的情况下获得类似的结果：我们的想法是在图像本身上应用SVG filter（在页面本身或外部URL上定义），因此不需要对existant markup或父容器做出假设

Codepen demo

<强>标记

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="overlayfilter">
  <defs>
      <filter id="overlay">
        <feColorMatrix
          type="matrix"
          values=".4  0  0  0  0
                   0 .4  0  0  0
                   0  0 .6  0  0
                   0  0  0 .6  0 ">

        </feColorMatrix>
    </filter>
  </defs>
</svg>


<img class='img-responsive' src='http://via.placeholder.com/150x150' alt='' />

<强> CSS

[id="overlayfilter"]  { display: block; height: 0; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: 100%;
  filter: url(#overlay);
}

.img-responsive:hover {
  filter: none;
}

过滤器的颜色以这种方式定义

<filter id="linear">
  <feColorMatrix
      type="matrix"
      values="R 0 0 0 0
              0 G 0 0 0
              0 0 B 0 0
              0 0 0 A 0 "/>
  </feColorMatrix>
</filter>

（source）

因此，您可以根据需要调整叠加颜色。由url()定义的过滤器目前已在all modern browsers（excluding Edge）上实施。

Answer 3

对于:: after css3代码，我确信你必须包含一个:: before状态，以便该文件读取after元素之前的内容。（请不要在此引用我，因为我不是100％肯定，但是当我使用这些时，我还包括::之前）

使用:: after content：url（/path/to/image.jpg）; - 图像以精确的尺寸插入，无法调整大小。由于渐变之类的东西实际上是图像，因此伪元素可以是渐变。

如何使用:: after将透明色放在图像上？

3 个答案: