Question

我们如何将span元素设为img元素？更准确地说，我们如何做到这一点，

<span src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'></span>

当我们把表情符号放在textarea中时，我在twitter消息栏中看到了这个概念。谢谢你的时间和合作。请看看我会很高兴。

编辑-1

这个问题与使用背景图片无关。我们可以有像twitter这样的其他选择。这就是我在twitter页面中看到的。

<span class="RichEditor-pictographText" title="Smiling face with halo" aria-
label="Emoji: Smiling face with halo" data-pictograph-text="" data-
pictograph-image="https://abs.twimg.com/emoji/v2/72x72/1f607.png">&emsp;
</span>

这些线条使图像看起来像，也没有背景图像。

Answer 1

您可以在课程背景中进行设置，并将该课程添加到范围

＆＃13;

.icon {
  background: url("https://abs.twimg.com/emoji/v2/72x72/1f607.png") no-repeat;
  width: 100px;
  display: inline-block;
  height: 100px;
}

＆＃13;

<span class='icon'></span>

＆＃13;

Answer 2

span没有使用background-image属性分配图像的属性，style除了span之外的属性。图像的大小（就像img一样）。

使用自定义属性（如data-src）的可能解决方法可能是使用脚本和insertRule()，并在样式表中添加伪类。

var span = document.querySelector('span[data-src]');
var src = span.dataset.src;
document.styleSheets[0].insertRule('span[data-src]::before { content: url('+src+'); }', 0);

span {
  border: 1px dashed gray;
  display: inline-block;
}

<span data-src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'></span>

另一种可能的方法是将img动态插入span。

当涉及Twitter的工作方式时，我猜他们使用类似的自定义属性，对于那些根本不支持表情符号的浏览器（或读者），如&emsp;和/或自定义字体。

Answer 3

你可以做这样的事情

$newarray = array();
foreach($array as $array2){

    if($array2['employeeTraveld'] == 1){
        $newarray['SingleemployeeTraveld'][] =  $array2['total_Trip'];
    }
    if($array2['employeeTraveld'] == 2){
        $newarray['TwoemployeeTraveld'][] =  $array2['total_Trip'];
    }
    if($array2['employeeTraveld'] == 3){
        $newarray['ThreeemployeeTraveld'][] =  $array2['total_Trip'];
    }
    if($array2['employeeTraveld'] == 4){
        $newarray['FouremployeeTraveld'][] =  $array2['total_Trip'];
    }
}
echo json_encode($newarray);

#abc
{ 
   background:url(http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1) left top; 
   width:50px; 
   height:50px;
   display: block;
   float: left;
}

如何使跨度看起来像img？

3 个答案: