màu nền gradient và hình nền DRYly

Question

Tôi có một số tiêu đề và nền của mỗi hình tôi muốn hiển thị cùng một màu tô, nhưng một hình nền khác (không lặp lại). Tôi muốn tránh sao chép bất kỳ quy tắc CSS nào cho màu nền hoặc vị trí hình nền, vì chúng sẽ giống nhau cho mỗi tiêu đề. Nói cách khác, điều duy nhất tôi cần phải chỉ định cho một tiêu đề riêng lẻ là đường dẫn đến tệp hình nền.

Dưới đây là những gì tôi có vào lúc này:

<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); 
} 

Có một vài vấn đề với điều này

1. tôi phải lặp lại các linear-gradient phong cách trong từng quy tắc .imgX
2. Nó doesn' t hiển thị chính xác trong Chrome, dường như không hỗ trợ danh sách các thuộc tính background-image và background-repeat được phân tách bằng dấu phẩy. Đây là những gì được hiển thị trong Chrome

Làm thế nào tôi có thể sửa chữa vấn đề với cách nền được kết xuất trong Chrome trong khi giảm thiểu sự trùng lặp các quy tắc CSS?

Answer 1

Sử dụng lớp học giả :before cho các biểu tượng nền của bạn.

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

Hoặc, vì bạn đang cố gắng giảm số lượng CSS, bạn có thể chỉ định lớp cho gradient và nối thêm vào HTML của bạn.

Answer 2

Đừng, bạn có hai lớp mà gradient nền này có thể được áp dụng cho, bgImage và banner. Đơn giản chỉ cần áp dụng gradient của bạn vào một trong những lớp học và đi từ đó. Ngoài ra, hãy thêm repeat-x ngay sau url hình ảnh của bạn để đảm bảo nó sẽ lặp lại.