fix(component): Minor improvements

Minor improvements

Author: wcandillon

README.md

@@ -33,3 +33,12 @@ You can also customize the transition time and the timing function used for that
                   transitionFunction="ease"
 />
 ```
+
+In case of `background=true`, it is possible to add some layers on top of the background image, for instance:
+
+```jsx
+<ProgressiveImage
+  preview="/images/tiny-preview.png" src="/images/preview.png" background={true}
+  backgroundImages={["linear-gradient(to top, rgba(31,31,31,0.3), rgba(31,31,31,0.3))"]}
+/>
+```

src/index.tsx

@@ -7,6 +7,7 @@ export interface ProgressiveImageProps {
     preview: string;
     src: string;
     background?: boolean;
+    backgroundImages?: string[];
     transitionTime?: number;
     timingFunction?: string;
 }
@@ -53,7 +54,7 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
 
     private cloneProps() {
         Object.keys(this.props)
-            .filter(prop => ["style", "src", "preview", "background", "transitionTime", "timingFunction"].indexOf(prop) === -1)
+            .filter(prop => ["style", "src", "preview", "background", "transitionTime", "timingFunction", "backgroundImages", "children"].indexOf(prop) === -1)
             .forEach(prop => this.clonedProps[prop] = this.props[prop]);
     }
 
@@ -68,8 +69,9 @@ export class ProgressiveImage extends React.Component<ProgressiveImageProps & Di
 
     private getBackgroundStyle() {
         const {src} = this.state;
+        const {backgroundImages} = this.props;
         const style = {
-            backgroundImage: `url(${src})`
+            backgroundImage: `${backgroundImages ? `${backgroundImages.join(",")},` : ""}url(${src})`
         };
         return Object.assign(style, this.getStyle());
     }