CSS 배경 이미지 속성을 할당하는 방법 클래스 및 ID를 혼합

Question

나는 이런 일이 일어나기를 바라는 사람이 있는지 또는 완전히 생각지 않으면 궁금합니다.

나는 많은 이미지를 사용하고 있으며 이러한 이미지를 표시하는 가장 효율적 (가장 쉬운 방법)은 background:url("link"); 속성을 사용하는 것입니다. link은 내 이미지 파일에 대한 적절한 링크입니다. 이렇게하면 내 HTML 파일도 어수선하게 정리되지 않습니다.

문제는 위의 코드가 각각 다른 이미지를 가리키는 50 개의 다른 ID에서 발견되며 이미지 크기를 조정해야한다는 것입니다. 그러나 각 코드 아래에 다음 코드를 넣지 않아도됩니다. 신분증.

background-size:180px 239px; 
background-repeat:no-repeat; 

---

은 단순히이 넣어 : 를 나는 이런 식으로 뭔가를 보이는 CSS를 가지고 ...

내 " ID"의

#image1 
{ 
    background:url("../Images/image1.png"); 
} 

#image2 
{ 
    background:url("../Images/image2.png"); 
} 

#image3 
{ 
    background:url("../Images/image3.png"); 
} 

내 클래스

이 코드를 입력하여 모든 사용자가 background-size의 값을 변경하지만 경우, 정상적인 보일 것가

참고

---

그리고 이것의 일반적인 사용 (당신은 내가 경험하고있는 문제를 알 수 100px 239px에게 말한다) HTML에서는 다음과 같은 것이다 :

<div id="image1" class="myClass"></div> 

---

이 문제의 jsfiddle은 여기에서 찾을 수 있습니다 : 012,338,668,599를

예상 결과는 바이올린의 텍스트 아래에 표시됩니다.

어떻게 코딩하면 깨끗하게 유지 될까요?

저는 CSS와 JS를 계속 유지하려고합니다. 은입니다. 나는 이것을 코딩하기위한 순수한 CSS 방법을 찾고있다. 하나의 단일 위치에서 모든 ID의 배경 속성을 제어해야합니다.

이 문제에 대한 도움을 주시면 감사하겠습니다. 감사합니다.

Answer 1

변경 배경을이 두 가지 속성을 추가하고 작동합니다 :)

#image1 
 
{ 
 
    background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg"); 
 
} 
 

 
#image2 
 
{ 
 
    background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif"); 
 
} 
 

 
.myClass 
 
{ 
 
    width:180px; 
 
    height:239px; 
 
    background-size:100px 239px; 
 
    background-repeat:no-repeat; 
 
    border:2px solid red; 
 
} 
 

 
/*------------------------------------*/ 
 

 

 
#thisIsWhatIWantItToLookLike 
 
{ 
 
    background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg"); 
 
    background-size:100px 239px; 
 
    background-repeat:no-repeat; 
 
} 
 

 
.mySadClass 
 
{ 
 
    width:180px; 
 
    height:239px; 
 
    border:2px solid blue; 
 
}

<div id="image1" class="myClass"></div> 
 
<div id="image2" class="myClass"></div> 
 
<p>This above images should show up like the one below does, squished</p> 
 
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>

Answer 2

background-size: 100px 239px !important; 
background-repeat: no-repeat !Important; 

배경 이미지로 클래스에

DEMO