Question

警告 - 初学者的问题！

这是一个简单的问题。我试图谷歌它，但我只看到搜索结果，人们问是否可以将两个背景图像分配给一个div（问题反转）。

当尝试将div的background属性设置为与另一个文件相同的文件时（复制属性＆amp; value），第二个div没有背景图像。

我在我的开发工具中收到警告，并且当将鼠标悬停在Chrome开发工具中时，新div的背景图片没有缩略图。

这让我觉得我无法将两个不同div的背景值设置为同一个图像文件。

我认为通过在不同的div中重复使用该文件作为背景可以提高效率？！

Answer 1

是的，可以将相同的图像用于不同的div：

<强>示例：

使用以下HTML：

<div id='one' class='test'></div>
<div id='two' class='test'></div>

您可以使用Javascipt实现您的任务：

示例1 http://jsfiddle.net/InferOn/wndcuq1j/

var one = document.getElementById('one');
var two = document.getElementById('two');

var src = 'http://fc03.deviantart.net/fs70/i/2012/163/0/d/dog_with_glasses_by_danihee-d53949b.jpg';

one.style.backgroundImage = 'url('+src+')';
two.style.backgroundImage = 'url('+src+')';

或者只是用CSS：

示例2 http://jsfiddle.net/InferOn/Lvu71sua/

.test{
    width:100px;
    height:100px;
    background-size:100px;
    background-repeat:no-repeat;
    background-image:url('http://fc03.deviantart.net/fs70/i/2012/163/0/d/dog_with_glasses_by_danihee-d53949b.jpg');
}

图像将由浏览器缓存，因此用户只会在第一次下载它们

两个div可以具有相同的背景图像（相同的文件引用）吗？

1 个答案: