Wie verwische ich Hintergrundbilder, behalte aber harte Kanten?

The desired effect (mockup).Wie verwische ich Hintergrundbilder, behalte aber harte Kanten?

ich ein Bild auf eine Schaltfläche in meiner Form maskiert

Wenn ich eine Unschärfe in den Hintergrund-Bild anwenden, ich weiche Kanten auf meine Taste bekommen, was ich nicht will.

Wie kann ich die harten Kanten der Schaltfläche beibehalten und auch den Text oben erscheinen lassen?

Ansicht der Pen: http://codepen.io/anon/pen/PWpMpX

HTML

<form> 
    <!-- Inputs not shown --> 
    <button id="gButton">Preview Album &raquo;</button> 
    </form>

CSS

button#gButton{ 
    display: block; 
    width: 280px; 
    height: 42px; 
    border: none; 
    border-radius: 11px; 
    background-color: #B08DC0; 
    color: #fff; 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 

    /*Background Image Stuff Below*/ 
    background-image: url(https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png); 

    background-size: 140%; 
    background-position: center; 

    -webkit-background-clip: content-box; 
    background-clip: content-box; 

    color: rgba(0,0,0,0); 

    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
} 

form{ 
    width: 280px; 
    margin:0 auto; 
    display: block; 
    text-align: center; 
    margin-top: 50px; 
}

Quelle

2017-01-21 Aristotle Manolakos

Zuallererst, separaten Text und Hintergrund - wenn Sie das Element verwischen, verwischen Sie auch den Textinhalt. Schlagen Sie vor, den Inhalt der Schaltfläche in einen zusätzlichen Bereich einzubinden, und positionieren Sie ein Pseudoelement auf der Schaltfläche hinter dem Bereich, um den unscharfen Hintergrund beizubehalten. Überlauf: versteckt sollte die Kanten innerhalb der abgerundeten Tastenecken scharf bleiben. – CBroe

@CBroe Ahh! Vielen Dank! Ich werde es jetzt versuchen. –

Bitte überprüfen Sie diesen Link: -https: //css-tricks.com/the-blur-up-technique-for-loading-background-images/ Vielleicht hilft es Ihnen. –

Ich würde empfehlen, das Hintergrundbild zu einem Pseudo-Element zu bewegen.

button { 
 
    width: 280px; 
 
    height: 42px; 
 
    
 
    position: relative; 
 
    overflow: hidden; 
 
    background: transparent; 
 
    border: 1px solid #B08DC0; 
 
    border-radius: 11px; 
 
    color: #fff; 
 
} 
 

 
button::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    /* Background... */ 
 
    background-image: url(//upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png); 
 
    background-size: 140%; 
 
    background-position: center; 
 
    background-clip: content-box; 
 
    filter: blur(5px); 
 
}

<button>Some Text</button>

Sie können mit der Breite/Höhe des Pseudoelements größer sein als 100% herumspielen. Sie müssen nur die oberen/linken Offsets anpassen. Auf diese Weise können Sie etwas entfernen, das wie ein "Glühen" um die Ränder des Bildes aussieht.

Quelle

2017-01-21 02:54:23 noahnu

Wie verwische ich Hintergrundbilder, behalte aber harte Kanten?

Antwort

Verwandte Themen