pourquoi je peux ' t utiliser image d’arrière-plan et la couleur ensemble

Question

ce que j’essaie de faire est de voir la couleur d’arrière-plan et de fond d’image la moitié de mon div couvrira l’image de fond d’ombre droite et autre part lef couvrira la couleur d’arrière-plan, mais lorsque j’ai utilisé la couleur image backgorund disparaissent

Answer 1

Il est parfaitement possible d'utiliser à la fois une couleur et une image comme arrière-plan d'un élément.

Vous définissez l' background-color et background-image styles. Si l'image est plus petite que l'élément, vous devez utiliser l' background-position style de la placer à la droite, et pour l'empêcher de répéter et couvrant l'ensemble de l'arrière-plan que vous utilisez l' background-repeat style:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

Ou en utilisant le style composite background:

background: green url(images/shadow.gif) right no-repeat;

Si vous utilisez le style composite background pour définir à la fois séparément, seul le dernier sera utilisé, c'est une des raisons pourquoi votre couleur n'est pas visible:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

Il n'y a aucun moyen de limiter l'image de fond ne couvrent qu'une partie de l'élément, de sorte que vous avez à faire en sorte que l'image est plus petite que l'élément, ou qu'il a des zones transparentes, pour la couleur d'arrière-plan pour être visible.

Answer 2

Pour la teinte d'une image, vous pouvez utiliser CSS3 background d'empiler des images et un linear-gradient. Dans l'exemple ci-dessous, j'utilise un linear-gradient qui n'ont pas dégradé. Le navigateur traite des gradients par les images (je pense qu'il génère en fait une image bitmap et superpositions) et donc, est en fait de l'empilement de plusieurs images.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Donnera un graphique-papier avec une légère teinte bleue, si vous avez eu le png. Notez que l'ordre d'empilement peut fonctionner en sens inverse de votre modèle mental, avec le premier élément à être sur le dessus.

Excellente documentation par Mozilla, ici:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Outil pour la construction de la dégradés:

http://www.colorzilla.com/gradient-editor/

Remarque - ne fonctionne pas dans IE11! Je vais poster une mise à jour lorsque je savoir pourquoi, depuis sa supposée.

Answer 3

utilisation

Answer 4

Et pour ajouter à cette réponse, assurez-vous que l’image elle-même a un arrière-plan transparent.

Answer 5

Rendre la moitié de l’image transparente donc la couleur de fond est vu à travers elle.

Sinon tout simplement ajouter un autre div reprenant 50 % vers le haut le div conteneur et il float left ou right. Puis appliquez-lui l’image ou la couleur.