动态地将背景图像添加到多个元素

我有我想要显示的图像列表。图像具有不同的宽度和高度，我想将它们全部放入li元素中，但li元素对于每个子图像应具有相同的尺寸。动态地将背景图像添加到多个元素

到这个唯一的方式（以使得图像将适合在标准尺寸李箱）是指定该图像作为li元素的背景：

<ul> 
     <li> 
     <div></div> 
     <span>Image1</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image2</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image3</span> 
     </li> 
     <li> 
     <div></div> 
     <span>Image4</span> 
     </li> 
    ...and many more 
</ul>

CSS：

ul li {  
     width: 75px; 
     height: 75px; 
     } 


ul li div{ 
     background-image: url('genereic path calculated in jquery'); 
     background-size: contain; /*IMPORTANT THIS!*/ 
     }

所有图片应该由75调整为75 ...从而使图像适合盒 - 这就是为什么我使用背景图片属性...

基本上，我可以为每个图像为此，但我有很多图像...所以我需要为每个列表项子div指定一个背景图像...

我该如何动态地为每个新的li> div添加这个背景图片？

例子：

$(function() { 

    $("li div").each(function() { 
     $(this).css('background-image','url(images/' + 'imagetitle)'); 
    }); 
});

我怎样才能让这个dymamic，而不必为每个格指定背景图像...

谢谢！

来源

2013-02-28 DextrousDave

这完全取决于你是否有一个图像文件名的数组，或者它们是否符合'image-01.jpg'，'image-02.jpg'等模式，或者你正在获取他们通过AJAX .... – Blazemonger 2013-02-28 16:24:14

@Blazemonger：我也同意火焰无论你有像img01.jpg，img02.jpg等文件夹中的数组或图像序列。 – 2013-02-28 16:29:16

首先，您将拥有包含图像的任何数据源，对吗？从它创建一个数组。

var liArray = { 'url1', 'url2', 'url3' };

然后尝试for循环

for(i=0, i<liArray.length,i=i+1) 
{ 
var odv = $.create("li"); 
odv.css('background-image','url(images/' + liArray[i])'); 
odv.appendTo($(ul)); 
}

这将动态创建图像。这是你的问题吗？

你必须关心你的绝对图像路径。我认为很明显，如果您在数组内传递绝对路径，那么在括号内没有需要的图像文件夹。

来源

2013-02-28 16:32:58 redflag237

好的谢谢。将看看我能做些什么... – DextrousDave 2013-02-28 18:33:59

也许你需要用$（odv）语句选择你的odv变量。我现在不确定，如果它仍然是JQ环境中的变量。只是尝试 - 如果你有任何问题只是发布他们。 – redflag237 2013-03-04 09:39:45

就我个人而言，我会把CSS放在一个CSS文件中。

.addBackground { 
    background: url(./path_to_my_image.png); 
}

然后，当你无论如何使用jQuery ..

$("span").each(function() { 
    $(this).addClass("addBackground"); 
});

来源

2013-02-28 16:45:09 KryptoniteDove

谢谢。但是，我如何动态地填充图像的路径？这样，我将不得不指定不同的.addbackground类...每个图像都会有一个diff背景 – DextrousDave 2013-02-28 17:43:49

您是否试图使用每个列表项> div作为缩略图的无序列表创建图像库？基本上我认为你可以硬编码CSS文件，并在DOM准备上面的代码时使用样式，或者使用像PHP这样的服务器端语言来索引图像文件夹中的所有文件，并将CSS文件吐出，这样每次你将一个文件添加到目录中，它将创建一个新类。如果您认为这听起来很不错，我可以提供一些代码。 – KryptoniteDove 2013-02-28 18:05:42

正确。 li项目应该包含div（缩略图）和跨度（这是作为图像描述的文本）...我希望你的帮助是 – DextrousDave 2013-02-28 18:36:09

PHP代码：

<?php 


function createGallery() { 
if ($pwd = opendir('./images/')) { 

    /* Loop over the directory. */ 
    while (false !== ($file = readdir($pwd))) { 
     $file_name = pathinfo($file); 
     $fn = $file_name['filename']; 

      if ($file_name['extension'] == "png") { 

       doCSS($fn, $file); 

      } 

    } 
    closedir($pwd); 
} 
} 

function doCSS($fn, $image) { 
$cssFile = "./gallery.css"; 

if (file_exists($cssFile)) { 
    // Attempt to open for append 
    $fh = fopen($cssFile, "a") or die("Error opening file."); 
} else { 
    // Attempt to create 
    $fh = fopen($cssFile, "w") or die("Error opening file."); 
} 

     $string = "#".$fn." { background: url(./images/".$image."); } "; 
    // Write to file 
    fwrite($fh, $string); 


fclose($fh);  
} 

createGallery(); 

?>

输出到gallery.css

#photo1 { background: url(./images/photo1.png); } #photo3 { background: url(./images/photo3.png); } #photo3menu_OLD { background: url(./images/photo3menu_OLD.png); } #photo1small { background: url(./images/photo1small.png); } #photo3menu { background: url(./images/photo3menu.png); } #photo3small { background: url(./images/photo3small.png); } #photo4 { background: url(./images/photo4.png); } #photo4details { background: url(./images/photo4details.png); }

个人而言，我会写一类用于定位的div和固定的尺寸和包括在沿线的主页面中的CSS文件的东西： -

.dimensions { 
    position: relative; 
    width: 75px; height: 75px; display: block; 
}

我也将使用PHP的页面上创建的标记而不是JS，因为无论如何您都在遍历目录来创建CSS文件。希望这可以帮助。

来源

2013-02-28 23:47:31 KryptoniteDove

动态地将背景图像添加到多个元素

回答

相关问题