在 <img></img> 元素周围划线

Question

我想要动画 3 .svg 图片：

<div class="sequence">
  <img src="assets/img/1.svg"/>
  <img src="assets/img/2.svg"/>
  <img src="assets/img/3.svg"/>
</div>

和css：

.sequence {
  position: relative;
}

.sequence img {
  position: absolute;
  top: 0;
  opacity: 0;  
  animation: cycle 0.3s steps(1) infinite;
}

@keyframes cycle {
  0%  { opacity: 1; }
  33% { opacity: 0; }
}

.sequence img:nth-child(2) {
  animation-delay: 0.1s;
}

.sequence img:nth-child(3) {
  animation-delay: 0.2s;
}

但这种方式在某些时候动画开始滑动和闪烁，在 <a class="sequence" id="anm"> 中包含 <img src="assets/img/1.svg" alt="" alt=""/> 不允许很好地将图像与元素中心对齐。

所以，从后台换个方式：

img{
  width: 60px;
  height: 60px;
  border: 0px;     
  border-style: none;  /*border-style: hidden;*/
  outline: none;
  animation:  rotateImages 0.3s infinite; 
}

@keyframes rotateImages {
  0%   { background: url("assets/img/1.svg"); }
  32%   { background: url("assets/img/1.svg"); }
  33%  { background: url("assets/img/2.svg"); }
  65%  { background: url("assets/img/2.svg"); }
  66% { background: url("assets/img/3.svg"); }
  100% { background: url("assets/img/3.svg"); }
}

with <img></img> 没有这个不足，但我不知道如何删除创建元素周围的细黑线，粉红色乡绅周围的边框，如下所示，它与 .svg 一起出现,.gif,.png。我试过添加 border-width: 0px;，以防万一 border-color: white; 因为我的背景是白色的，但它看起来像是别的东西。我不确定如何删除它：

示例：

https://jsfiddle.net/3gxpbauo/

.png-s，与 .svg:

的图像相同

正如我所指出的，我想将其与 <label><h1><p id="nameblock">Text</p></h1></label> 对齐在一条文本中心线上。使用 <div id="container"></div>，显示在 Prajyot Tote 答案中，或如上所示使用 <a class="sequence" id="anm">，（它也成功显示没有轮廓的标签），在这两种情况下都将元素对齐在不同的行上，或者使用.inline{display:inline-block;} 在文本的最后一行。这是<img>和<div id="container"></div>的区别：

解法：

因此，根据答案，我在 Prajyot Tote 的帮助下为我的特定任务找到了解决方案，使用 #container 没有 #img，border: 0px; 用于 .inline:

#container {
  width: 72px;
  height: 73px;
  border: 0px;
  animation:  rotateImages 0.3s infinite; 
}

.inline{display:inline-block;vertical-align: middle; border: 0px;}

@keyframes rotateImages {
  0%   { background: url("https://i.stack.imgur.com/d0tnz.png"); }
  32%   { background: url("https://i.stack.imgur.com/d0tnz.png"); }
  33%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  65%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  66% { background: url("https://i.stack.imgur.com/O0fGg.png"); }
  100% { background: url("https://i.stack.imgur.com/O0fGg.png"); }
}

<div class="inline">
  <label><h1><p id="nameblock">Some text</p></h1></label>
</div>
<div id="container" class="inline"></div>

Answer 1

问题不在于边框、svg 或 png，而是您正在使用的标签。

background-image 可以与任何元素一起使用。将 img 标记更改为 div，一切都会好起来的。

#container,
img {
  width: 60px;
  height: 60px;
  animation: rotateImages 0.3s infinite;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 0 20px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #eee;
}

@keyframes rotateImages {
  0% {
    background: url("https://i.stack.imgur.com/d0tnz.png");
  }
  32% {
    background: url("https://i.stack.imgur.com/d0tnz.png");
  }
  33% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  65% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  66% {
    background: url("https://i.stack.imgur.com/O0fGg.png");
  }
  100% {
    background: url("https://i.stack.imgur.com/O0fGg.png");
  }
}

<div class="sequence">
  <div class="inline">
    <label><h1><p id="nameblock">Some text</p></h1></label>
  </div>
  <div id="container" class="inline"></div>
</div>

我们看到的边框是空的img标签。无法帮助呈现空 img 标签。

更新代码以使元素正确内联。

注意：添加了border，以便可以正确看到元素位置。而padding是为了美观。

Answer 2

border: 1px solid #FFFFFF;

使用这个属性，希望它有用。如果它不起作用，则将边框大小增加到 2 或 3 像素。或者使用 border: none; property.

在 <img></img> 元素周围划线

Line around <img></img> element

html

css

animation

background