Biscuit pattern, как

только начал обниматься вокруг свойства clip в CSS.Biscuit pattern, как

Я работаю над веб-сайтом для бисквитной фабрики, и я хочу сделать его отзывчивым. Моя проблема в том, что я столкнулся с разделом с сайта, где я не могу просто использовать старый добрый png-фон из-за отзывчивых проблем.

Итак, мой вопрос: как вам удается получить этот шаблон (обрезание, возможно) в CSS, а не с помощью прозрачности png.

.home .section-4 { 
     background-image:url('../images/backgrounds/tales.png'); 
     background-size:cover; 
}

Я попытался с помощью псевдо-элементов, но без удачи.

источник

2016-08-12 VladC

Можете ли вы объяснить, что отзывчивым проблемы, которые вы испытываете, и как вы хотите вести себя вместо этого? Используйте [JSFiddle] (https://jsfiddle.net/), чтобы проиллюстрировать проблему. – user500665

Аналогичный вопрос (с твердым цветом, хотя, без изображения) http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/25903879#25903879 –

Если вы просто используете radial-gradient (от прозрачного до любого цвета вашего фона) в псевдоэлементе, вы можете добиться прочного результата.

.wave{ 
 
    height: 60px; 
 
    position: relative; 
 
    background-image:url('http://placehold.it/350x60'); 
 
} 
 
.wave::before{ 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-repeat: repeat; 
 
    height: 10px; 
 
    background-size: 20px 20px; 
 
    background-image: 
 
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px); 
 
}

<div class='wave'></div>

источник

2016-08-12 07:56:18

ответ

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