使用符号名称调用 class

Question

编辑： 我想用 Jekyll 实现它，据我所知，它没有 PHP、jQuery 和等等...

我有一个关于 CSS 的简单问题；它一定有一个简单的解决方案，但我就是找不到。

假设一个人有多个 divs 和一些 classes:

<div class="cat">
<div class="dog">
<div class="bird">
<div class="snake">
...

并且在 .css 中我们想要设置这些 'pet' div 的样式；从 class 到 class 的风格非常相似（例如，我们有一些照片 cat.jpg、dog.jpg... 并想展示它们）。这可以通过某种象征性的方法来实现吗？像

div.pet{
    width: 50px;
    height: 50px;
    background: url("/pictures/pet.jpg") no-repeat 0 0;
    ...

(但是没有class="pet"也没有pet.jpg)

Answer 1

无法将不同的图片来源添加到纯 CSS 的图片标签中。您可能需要使用 JS, JQuery, PHP , 等

您可以使用 JavaScript/JQuery 执行此操作，如下所示：

将所有图像名称存储在一个数组中，然后运行循环加载（页面）以使用这些数组元素（值）获取图像。

使用 jQuery，您可以像这样设置 img 来源：

$("img:nth-child(i)").attr('src', <new path from array[i th element]>);

nth-child(i)表示第i张图片。

使用Js，你可以这样做：

var images = [
    'path/to/image1.png',
    'path/to/image2.png',
    'path/to/image3.png',
    'path/to/image4.png',
    'path/to/image5.png'
];

function loadImages(imgArr, targetId){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
    }
}

loadImages(images);

您还可以从您的按钮调用 loadImage() 函数：

<button onclick="loadImages(images)">Start</button>

参考：JavaScript load Images in an Array

Answer 2

我不确定你在问什么但据我了解你想对 div 元素进行一些全局设置并更改背景图片：

https://jsfiddle.net/shtjab2k/

Css

     #pets > div
  {
    width:100px;
    height:40px;
    border:2px solid black;
    float:left;
  }

  .cat
  {
    background-image: url("https://i.vimeocdn.com/portrait/58832_300x300.jpg");
  }
  .bird
  {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/2000px-Solid_blue.svg.png");
  }

html

<div id="pets">
 <div class="cat "></div>
 <div class="dog "></div>
 <div class="bird "></div>
 <div class="snake "></div>
</div>

Answer 3

我会用 sass:

div {
  $list: "cat", "dog", "frog";
  // generate classes for list elements
  @each $element in $list {
    &.#{$element} {
    background-image: url('images/#{$element}.jpg');
      }
    }
  }

Answer 4

这不是 CSS 可以做的事情。 CSS 只能设置对象的样式，不能制作其他 changes/additions/deletions 个对象，共 DOM 个对象。

但这绝对是您可以用 jQuery 做的事情！如果你知道你总是有一个 class 名称 class="cat" 与文件名 cat.jpg 相同，你可以这样做：

$("div").each(function(){
   var petClass = this.attr('class');
   var petImg = petClass + ".jpg";
   this.append("<img src='"+petImg+"' ... >");
});

Answer 5

最简单、纯粹的css方法是这样的：

.dog, .cat, .bird, .snake {
  width: 50px;
  height: 50px;
  background: url("/pictures/pet.jpg") no-repeat 0 0;
}

即使我们提供的背景不存在也没关系，我们会在css中为个别宠物类型替换它：

.dog {
  background-image: url("/pictures/dog.jpg");
}

您似乎正在寻找一种在单个规则集中执行此操作的方法，不幸的是，这是不可能的。为此，您必须考虑使用 Javascript 或 CSS 超集（请参阅有关此 post 的其他答案）。

否则，您可以多写几行css，然后为每种宠物类型设置背景图片。 =P

使用符号名称调用 class

Calling a class with symbolic name

html

css

sass

jekyll