Блог

Главная - Вопросы по программированию - как я могу сделать наложение фонового изображения с кривым туманом

как я могу сделать наложение фонового изображения с кривым туманом

#css #background #overlay #linear-gradients

#css #фон #наложение #линейные градиенты

Вопрос:

Во-первых, извините. Я не могу точно описать, как я хочу, чтобы мое наложение выглядело точно.

Я пытаюсь сделать так, чтобы наложение выглядело так, как показано на рисунке ниже.

Я попробовал следующий код:

 *,*::after,*::before{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        section{
            margin-left: auto;
            padding: 20px 100px;
        }
           .container{
            position: relative;
            min-width: 100%;
            height: 400px;
            background: rgb(0, 64, 255);
            margin: 20px;
            border-radius: 20px;
        }
       
        .developer-overlay{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background:  linear-gradient(115deg, rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0.801) 35%,rgba(255, 255, 255, 0.356) 80%,transparent 100%); */
            background:  radial-gradient(circle at -100%, #fff 50%, rgba(255, 255, 255, 0.685) 75%, rgba(255, 255, 255, 0.363) 100%);;
            width: 100%;
            height: 100%;
        } 
    <section>
        <div class="container">
           <div class="holder">
            <div class="developer-bg"></div>
            <div class="developer-overlay"></div>
          
           </div>
        </div>

    </section>

Изображение

введите описание изображения здесь

Ответ №1:

Используйте маску, как показано ниже:

 .box {
  margin:50px;
  border-radius:30px;
  height:200px;
  background:url(https://picsum.photos/id/1024/800/800) center/cover no-repeat;
  -webkit-mask:radial-gradient(100% 150% at right, #fff 40%,transparent 90%); 
}

body {
  background:pink;
} 
 <div class="box"></div>

Комментарии:

1. я думаю, это решит мою проблему. прежде чем задать этот вопрос, я думал, что этот вопрос решит две мои проблемы, но это другой вопрос, есть ли какой-нибудь способ повернуть маску на 30,45 градусов. для этого наложения . прежде чем спросить, я знаю, что мне нужно попробовать это самому, спасибо…

2. @noor замените на at right , at 100% 50% затем увеличьте / уменьшите 50%, чтобы получить то, что вы хотите

3. @noor и отрегулируйте 150% для управления кривой

4. сформируйте изображение , я думаю, что ширина изогнутого верха меньше, чем ширина изогнутого низа

5. @noor да, отрегулируйте значение, как я вам сказал, и вы можете получить его .. 100% 50% сделают оба одинаковыми, использование 100% 40% увеличит дно и так далее