<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;
}

但是这种方式有时会使动画开始滑动和闪烁，在<img src="assets/img/1.svg" alt="" alt=""/>中包含<a class="sequence" id="anm">并不能使图像与元素中心对齐。

因此，从背景出发的另一种方式：

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"); }
}

带有<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与{{1} ：

#img

border: 0px;

Answer 1

问题与边框，svg或png无关，而是您正在使用的标签。

with open(after_columns) as In, open(coord_with_scale, 'w') as Out: for line in In: if line.strip().split()[2] not in ('1', '9'): Out.write(line) 可以与任何元素一起使用。将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是为了美观。

Answer 2

border: 1px solid #FFFFFF;

使用此属性，希望它可以工作。如果不起作用，则将边框大小增加到2或3 px。或使用border: none; property。