Div заполнен белым прозрачным фоном, который становится прозрачным по краям - PullRequest
Новая
       1

Div заполнен белым прозрачным фоном, который становится прозрачным по краям

0 голосов
/ 27 июня 2018

У меня есть фоновое изображение, которое я хочу заменить на CSS3, потому что легче менять цвета и т. Д. Но я немного борюсь с CSS, играя с 

background: rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 0 0px 50px rgba(255,255,255,0.5);
box-shadow: inset 0 0 0px 50px rgba(255,255,255,0.5);

Но я не могу получить нужный мне эффект, который

enter image description here

на странице у меня есть div ... так что код довольно прост: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>

<body class="background">
    <div class="whitebackground">
        Content in black here
    </div>
</body>
</html>

Любое предложение, чтобы получить тот же эффект, работающий в CSS3?

Спасибо

1 Ответ

0 голосов
/ 27 июня 2018

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

На белом фоне div что-то вроде: 

background-color: rgba(255,255,255,.7);
box-shadow: 0px 0px 30px 25px rgba(255,255,255,.7);


.background {
  background-image: url('https://picsum.photos/800/500');
  background-size: cover;
  background-repeat: no-repeat;
  width: 800px;
  height: 500px;
  padding: 80px;
}

.whitebackground {
  padding: 100px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.7);
  box-shadow: 0px 0px 30px 25px rgba(255,255,255,.7);
}
<div class="background">
  <div class="whitebackground">
    <h1> Content in here </h1>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...