Cover Hintergrundbild + Hintergrund mit Farbverlauf

Ich baue gerade eine Website und versuche einen Abschnitt mit Hintergrundbild zu setzen, um den gesamten Abschnitt und Hintergrund mit Farbverlauf zu decken, der generiert wird. ich sie zusammen versucht setzen, aber es nicht wirklich funktioniert, ist es das, was ich versucht: https://jsfiddle.net/gmtujnmh/Cover Hintergrundbild + Hintergrund mit Farbverlauf

#fullcover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-position: center; 
 
    max-height: 60%; 
 
    display: inline; 
 
    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); 
 
    /* fallback */ 
 
    background: rgba(62, 21, 49, 1); 
 
    background: -moz-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(62, 21, 49, 1)), color-stop(100%, rgba(162, 23, 128, 1))); 
 
    background: -webkit-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -o-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: -ms-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    background: linear-gradient(135deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e1531', endColorstr='#a21780', GradientType=1); 
 
}

<div id="fullcover"></div>

der Gradient Code aus cssmatic genommen, jemand kann mir helfen?

Quelle

2016-09-07 ssabin

Ist [diese] (https://jsfiddle.net/gmtujnmh/1/), was Sie zu tun versuchen? – Itay

Ja, aber der Verlauf funktioniert nicht – ssabin

Hmmm, warum Farbverlauf und Vollbild? Willst du mit der Opazität spielen? –

Der Code von deiner Geige stimmt nicht mit dem Code überein, den du hier gepostet hast, diese Antwort ist für den Code in der Geige.

Sie müssen einige Undurchsichtigkeit der Steigung an, es löste es für mich, hier eine Geige für Sie:

https://jsfiddle.net/gmtujnmh/2/

#fullcover{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-position: center; 
    max-height: 60%; 
    display:inline; 

    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* fallback */ 

background-image: -webkit-gradient(
    linear, left top, left bottom, from(rgba(62,21,49,.6)), 
    to(rgba(162,23,128,.9)), color-stop(.5,#333333) 
), url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* Chrome 10+, Saf5.1+ */

Jetzt müssen Sie nur mit den Farben und Opazität spielen Bekomme, was du willst, hoffe es hilft.

Quelle

2016-09-07 06:14:12

Scheint, wie es funktioniert, vielen Dank – ssabin

Eine andere Frage, kann ich meine sagen Hintergrundbild Wo soll ich anfangen? – ssabin

Sie können das Hintergrundbild mit der Eigenschaft background-position verschieben, indem Sie Pixel, Stichwörter oder Prozentangaben verwenden ... Wenn Sie etwas anderes möchten, sollten Sie etwas nachforschen und herausfinden, ob es etwas Nützliches gibt Erstelle eine neue Frage :) –

Versuchen Sie es.

body{ 
 
     background:url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue); 
 
    height:100%; 
 
    } 
 
    html{height:100%;}


 

 
    <body> 
 
    here we go 
 
    </body>

Quelle

2016-09-07 06:18:03

Cover Hintergrundbild + Hintergrund mit Farbverlauf

Antwort

Verwandte Themen