我計劃為一個朋友建立一個自定義的圖片庫，我確切地知道我將如何制作HTML，但是我遇到了一個CSS的小問題。(如果可能的話，我希望頁面樣式不要依賴jQuery) 我的問題是關于: HTML中的數據屬性 CSS中的背景圖像 我對我的html縮略圖使用這種格式: & ltdiv class = " thumb " data-image-src = " images/img . jpg " >& lt/div & gt；

我認為CSS應該是這樣的:

.thumb {
    width:150px;
    height:150px;
    background-position:center center;
    overflow:hidden;
    border:1px solid black;

    background-image: attr(data-image-src);/*This is the question piece*/
}

我的目標是從HTML文件中的div.thumb獲取data-image-src，并將其用于CSS文件中的每個div.thumb背景圖像源。

這里是一個Codepen筆，以便獲得我正在尋找的動態示例: http://codepen.io/thestevekelzer/pen/rEDJv

你最終將能夠使用

background-image: attr(data-image-src url);

但據我所知，這還沒有在任何地方實現。在上面的例子中，url是attr()的可選“類型或單元”參數。參見https://drafts.csswg.org/css-values/#attr-notation.

如果你想只使用HTML和CSS，你可以使用CSS變量。 請記住，IE不支持css變量。

<div class="thumb" style="--background: url('images/img.jpg')"></div>

.thumb {
    background-image: var(--background);
}

代碼筆:https://codepen.io/bruce13/pen/bJdoZW

將內容和風格混為一談并不是最好的做法，但一個解決方案可能是

<div class="thumb" style="background-image: url('images/img.jpg')"></div>

為此，您需要一點JavaScript:

var list = document.getElementsByClassName('thumb');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}

把它包起來& lt腳本& gt標簽位于底部，就在& lt/body & gt；標記或包裝在頁面加載后調用的函數中。

使用一些Sass怎么樣？下面是我為實現這一點所做的工作(盡管注意，您必須為每個數據屬性創建一個Sass列表)。

/*
  Iterate over list and use "data-social" to put in the appropriate background-image.
*/
$social: "fb", "twitter", "youtube";

@each $i in $social {
  [data-social="#{$i}"] {
    background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0;
    background-size: cover; // Only seems to work if placed below background property
  }
}

本質上，您列出了所有的數據屬性值。然后使用Sass @each遍歷并選擇HTML中的所有數據屬性。然后，引入迭代器變量，讓它匹配一個文件名。

無論如何，正如我所說的，你必須列出所有的值，然后確保你的文件名包含列表中的值。

超文本標記語言

<div class="thumb" data-image-src="img/image.png">

jQuery

$( ".thumb" ).each(function() {
  var attr = $(this).attr('data-image-src');

  if (typeof attr !== typeof undefined && attr !== false) {
      $(this).css('background', 'url('+attr+')');
  }

});

JSFiddle上的演示

你也可以用JavaScript來做這件事。

對于像我一樣想要一個簡單答案的人來說

類似于如何像1，2，3這樣的步驟

這就是我所做的

首先創建HTML標記

<div class="thumb" data-image-src="images/img.jpg"></div>

然后，在結束body標記之前，添加以下腳本

作為示例，我在下面的代碼中包含了結尾部分

所以復制的時候要小心

<script>
var list = document.getElementsByClassName('thumb');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}
</script>

</body>

這是一個簡單的例子，使用jQuery我們可以把圖片放在背景中

$('*[data-background-image]').each(function() {
    $(this).css({
        'background-image': 'url(' + $(this).data('background-image') + ')'
    });
});

div{
  height:200px;
  width:100% ;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-background-image="https://via.placeholder.com/500"> </div>

HTML代碼

<div id="borderLoader"  data-height="230px" data-color="lightgrey" data- 
width="230px" data-image="https://fiverr- res.cloudinary.com/t_profile_thumb,q_auto,f_auto/attachments/profile/photo/a54f24b2ab6f377ea269863cbf556c12-619447411516923848661/913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a.jpg">

</div>

JS代碼

var dataValue, dataSet,key;
dataValue = document.getElementById('borderLoader');
//data set contains all the dataset that you are to style the shape;
dataSet ={ 
   "height":dataValue.dataset.height,
   "width":dataValue.dataset.width,
   "color":dataValue.dataset.color,
   "imageBg":dataValue.dataset.image
};

dataValue.style.height = dataSet.height;
dataValue.style.width = dataSet.width;
dataValue.style.background = "#f3f3f3 url("+dataSet.imageBg+") no-repeat 
center";