Как размыть фоновое изображение, но сохранить твердые края?

The desired effect (mockup).Как размыть фоновое изображение, но сохранить твердые края?

я маскируется изображение к кнопке в моей форме

Когда я размойте на фоновое изображение, я получаю мягкие края на моей кнопки, которые я не хочу.

Как сохранить твердые края кнопки, а также отобразить текст сверху?

Посмотреть 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; 
}

источник

2017-01-21 Aristotle Manolakos

Прежде всего, отдельный текст и фон - если вы размываете элемент, вы также размываете текстовое содержимое. Предложите вам обернуть содержимое кнопки в дополнительном диапазоне и поместить псевдоэлемент на кнопку за пролетом, чтобы удерживать размытый фон. переполнение: скрытый должен держать края острыми в закругленных углах кнопок. – CBroe

@ CBroe Ahh! Благодаря! Я попробую это сейчас. –

Пожалуйста, проверьте эту ссылку: -https: //css-tricks.com/the-blur-up-technique-for-loading-background-images/ Может быть, это поможет вам. –

Я рекомендовал бы двигаться фоновое изображение псевдо-элемента.

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>

Вы можете играть вокруг с имеющей ширину/высоту элемента-псевдо быть больше, чем на 100%. Вам просто нужно настроить верхние/левые смещения. Таким образом, вы можете удалить то, что выглядит как «свечение» по краям изображения.

источник

2017-01-21 02:54:23 noahnu

Как размыть фоновое изображение, но сохранить твердые края?

ответ

Смежные вопросы