HTML 데이터 속성을 사용하여 CSS 배경 이미지 URL 설정

저는 친구를위한 사용자 지정 사진 갤러리를 만들 계획이며 HTML을 어떻게 제작할지 정확히 알고 있지만 CSS에 작은 문제가 있습니다.
(가능한 경우 페이지 스타일링이 jQuery에 의존하지 않는 것을 선호합니다)

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*/
}

다음은 내가 찾고있는 동적 예제를 얻기위한 Codepen Pen입니다.
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);
}

Codepen : 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 + "')";
}

랩 점에서 <script>맨 아래에있는 태그 바로 전에 </body>페이지가로드되면 당신이 전화하는 기능에 태그 또는 포장.

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의 모든 데이터 속성을 반복하고 선택합니다. 그런 다음 반복기 변수를 가져 와서 파일 이름과 일치하도록합니다.

어쨌든, 내가 말했듯이 모든 값을 나열한 다음 파일 이름이 목록의 값을 포함하는지 확인해야합니다.

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>

그런 다음 종료 본문 태그 앞에 다음 스크립트를 추가하십시오.

예제로 아래 코드에 엔딩 본문을 포함했습니다.

복사 할 때 조심하세요

<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>

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";