Размытое изображение с прозрачным текстом сверху, используя html и css, как iOS 13 новый пользовательский интерфейс - PullRequest
Новая
       3

Размытое изображение с прозрачным текстом сверху, используя html и css, как iOS 13 новый пользовательский интерфейс

0 голосов
/ 24 февраля 2020

Так что на днях я возился с Xcode.
Я видел видео Apple, объясняющее пользовательский интерфейс и некоторые новые эффекты размытия в IOS 13, поэтому я протестировал его и мне действительно понравилось.
Итак, я получил изображение с эффектом размытия и текстом сверху, но у текста было другое размытие, чем на изображении, так что это было как-то заметно.
Вот результат:
enter image description here

В общем, я хотел бы добиться этого, используя HTML и CSS, но это выглядит довольно сложно.
Есть ли какой-нибудь возможный способ сделать это?


Заранее все равно спасибо.

Ответы [ 2 ]

1 голос
/ 24 февраля 2020

Мой компьютер не позволяет мне видеть изображение в данный момент, но если вы хотите размыть фон, вы можете использовать: 

filter: blur(8px);
-webkit-filter: blur(8px);

и так далее для каждого браузера. Обязательно примените эти стили к самому изображению, а не к контейнеру.

Вы можете проверить эффект здесь: https://theexplorerblog.com/learning-base.php

Надеюсь, это поможет.

1 голос
/ 24 февраля 2020

Используя CSS, вы можете использовать свойство opacity или использовать rgba значения цвета. вот так: 

<style>
div.background {
  background: url(https://loremflickr.com/320/240) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* using the opacity property */
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold; 
  /* Green background with 70% opacity */
  color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...