पृष्ठभूमि ढाल रंग और पृष्ठभूमि छवि DRYly

Question

मेरे पास कई शीर्षलेख हैं और प्रत्येक की पृष्ठभूमि में मैं एक ही ढाल रंग दिखाना चाहता हूं, लेकिन एक अलग (गैर-दोहराव) पृष्ठभूमि छवि। मैं पृष्ठभूमि ढाल रंग या पृष्ठभूमि छवि स्थिति के लिए किसी भी सीएसएस नियमों को डुप्लिकेट करना चाहता हूं, क्योंकि वे प्रत्येक शीर्षक के लिए समान होंगे। दूसरे शब्दों में, एकमात्र चीज जिसे मुझे किसी व्यक्तिगत शीर्षक के लिए निर्दिष्ट करने की आवश्यकता होनी चाहिए वह पृष्ठभूमि छवि फ़ाइल का पथ है।

यहाँ मैं इस समय है:

<h1 class="banner bgImage img1">background image 1</h1> 
<h1 class="banner bgImage img2">background image 2</h1> 
<h1 class="banner bgImage img3">background image 3</h1> 
<h1 class="banner">heading without background image</h1> 

.banner { 
    /* For old browsers that don't support gradients */ 
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */ 
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px; 
} 

/* Specifies position of background image */ 
.bgImage { 
    background-position: 5px 50%, 0 0; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
} 

.img1 { 
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img2 { 
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img3 { 
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D); 
} 

वहाँ मैं प्रत्येक .imgX नियम

यह नहीं करता है 'में linear-gradient शैली को दोहराना इस

1. के साथ समस्याओं के एक जोड़े हैं टी क्रोम में सही ढंग से प्रस्तुत नहीं करता है, जो background-image और background-repeat गुणों की अल्पविराम से अलग सूची का समर्थन नहीं करता है। इससे Chrome

में क्या प्रदर्शित किया जाता है मैं जिस तरह से पृष्ठभूमि क्रोम में प्रदान की गई है, जबकि सीएसएस नियमों के दोहराव को कम करने के साथ समस्या का समाधान कैसे कर सकते हैं?

Answer 1

अपने पृष्ठभूमि आइकन के लिए :before छद्म-वर्ग का उपयोग करें।

.img1:before { 
    content: ''; 
    float: left; 
    position: relative; 
    background: transparent url('img1.png') left top no-repeat; 
    width: 16px; /* change to actual width of img */ 
    height: 16px; /* change to actual height of img */ 
} 

या, जब से तुम सीएसएस की राशि राहत देने के लिए कोशिश कर रहे हैं, तो आप ढाल के लिए एक वर्ग निर्दिष्ट और संलग्न कि आपके HTML में कर सकते हैं।

Answer 2

डॉन, आपके पास दो वर्ग हैं जो इस पृष्ठभूमि ढाल पर लागू हो सकते हैं, bgImage और banner। बस अपने ग्रेडियेंट को उन कक्षाओं में से एक पर लागू करें और वहां से जाएं। repeat-x को अपनी छवि यूआरएल के ठीक बाद भी सुनिश्चित करें कि यह दोहराएगा।