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

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

---

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

---

내 질문은 다음과 같습니다. CSS의
Data-AttributeHTML
Background-image에서

---

HTML 썸네일에이 형식을 사용하고 있습니다.
<div class="thumb" data-image-src="images/img.jpg"></div>

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

---

내 목표는 걸릴 것입니다 data-image-src로부터를 div.thumb내 HTML 파일에 각을 위해 사용 div.thumb(들) background-image내 CSS 파일의 소스.

다음은 내가 찾고있는 동적 예제를 얻기위한 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을 참조 하십시오 .

---

콘텐츠와 스타일을 혼합하는 것은 모범 사례가 아니지만 해결책은 다음과 같습니다.

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

---

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로도이 작업을 수행 할 수 있습니다.

---

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

---

나처럼 멍청한 대답을 원하는 사람들을 위해

1, 2, 3으로 단계하는 방법과 같은 것

여기 내가 한 일입니다

먼저 HTML 마크 업을 만듭니다.

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

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

I included the ending body on the code below as an example

So becareful when you copy

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

참고URL : https://stackoverflow.com/questions/15734546/using-html-data-attribute-to-set-css-background-image-url