Question

我在这里遇到的问题是因为我们为客户使用了一个主题（wordpress），这使得他们可以轻松地更改图像，这是它生成的代码的简单版本：

<div class="row">
   <div class="column">
      <img class="image" src="image user can change">
   </div>
</div>

我需要尝试实现的是图像顶部的一层，在图像上放置徽标，而不更改主题产生的核心HTML，只使用CSS。

我的想法是在类列中添加背景图像，并以某种方式将其置于前面。我在列上尝试了z-index而没有运气。有什么想法吗？

Answer 1

您可以使用伪元素来实现您的目标。尝试使用以下代码：

.column {
  position:relative;
}
.column:after {
  content:"";  
  position:absolute;
  z-index:2;
  background:url(your-image.jpg); 
}
.column img {
  position:relative;
  z-index:1;
}

这是一个小例子： https://jsfiddle.net/scooterlord/cqhf2gw4/

Answer 2

我认为您可以利用列类中的:after选择器。像这样：

.column {
    position: relative;
}

.column:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 10px;
    right: 10px;
    background-image: url('path/to/logo.png');
}

这会在右下方放置一个小徽标。

Answer 3

添加新课程.overlay添加img徽标路径，为家长position:absolute;

＆＃13;

.image {
height: 200px;
max-width: 100%;
}

.overlay{
position:absolute;
/*positioning here*/
}

.overlay img{
height: 30px;
}

＆＃13;

<div class="row">
   <div class="column">
   <div class="overlay"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div>
      <img class="image" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
   </div>
</div>

＆＃13;

使用类（CSS）

3 个答案: