Мне интересно, можно ли затемнить div, смешивая все края.

Пример ниже - попытка, но я могу смешать только верхний и нижний края. Есть ли какое-то решение, где вы также можете скрыть левый и правый края контейнера? Добавление второго горизонтального линейного градиента, похоже, не работает и не делает радиальный градиент.

body {
  background: grey;
}

.block {
  color: white;
  text-align: center;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  height: 100px;
  width: 400px;
  background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%,
  rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%);
}
<div class='block'>
  Hello World
</div>
css
0
user4584963 28 Май 2017 в 04:54

2 ответа

Лучший ответ

Я думаю, что могу помочь тебе.

Сначала я предоставлю вам код, который работает, а затем объясню, ПОЧЕМУ он работает. Поехали:

Html

<body>
    <div class='block'>
        <div class='block2'>
           Hello World
        </div>
    </div>
</body>

Css

* {
    padding: 0;
    margin: 0;
}

body {
  background: grey;
}

.block {
  color: white;
  text-align: center;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  height: 100px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%,
  rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%);
}

.block2 {
  height: 100px;
  width: 400px;
  margin: auto;
}

Хорошо, позвольте мне объяснить! :)

Давайте сначала посмотрим на ваш HTML. Вы в основном содержат текст «Hello World», поэтому любой фон, который у вас есть, будет ограничен границами этого контейнера.

Итак, если вы хотите, чтобы у вашего градиента не было боковых границ, тогда этот контейнер (этот div) расширяет всю ширину страницы. Вы по-прежнему можете хранить текст в своем собственном контейнере, и, если вы не зададите ему настройки цвета фона, он будет ПРОЗРАЧНЫМ .... оооооо ... ааааа! РЖУНИМАГУ!!!

Вы заметите, что в HTML все, что я делал, это помещал div в исходный div класса «block», и я назвал его «block2». Созданный мной блок "block2" - это место, где я помещаю текст.

Хорошо, теперь давайте поговорим о коде CSS.

Я сделал 3 изменения, и они ОЧЕНЬ просты. Вот они в порядке:

Изменить 1 . В самой первой строке кода я поставил:

* {
  margin: 0;
  padding: 0;
}

Это просто для того, чтобы у вас не было никаких странных мест на внешних краях вашего монитора или чьего-либо другого монитора в этом отношении. это очень полезный небольшой фрагмент кода и «мягкий сброс браузера». Он просто дает вам ровное игровое поле, обнуляя эти значения, так что у вас будет больше шансов на то, что ваше творение будет выглядеть согласованно в разных браузерах.

Изменить 2 - я добавил следующий код в исходный код CSS:

.block {
  width: 100%;
}

Все, что нужно было сделать, это расширить этот div до ширины браузера, что, конечно, избавило от границ по бокам. Вместо определенной ширины 400 пикселей, мы сказали браузеру, чтобы он занимал всю ширину экрана.

Изменить 3 - я добавил небольшой стиль в новый созданный мной div, который называется "block2". Вот код:

.block2 {
  height: 100px;
  width: 400px;
  margin: auto;
}

Я просто дал ему те же измерения, которые вы изначально делали, а затем центрировал его по центру div «блока» (и, следовательно, экрана, потому что ширина div теперь составляет 100%), предоставив ему поле auto.

Надеюсь, это поможет. Извините, объяснение было так долго! Мне просто нравится быть внимательным и мне нравится помогать людям понять, почему решение работает так, как оно работает.

:)

2
Shenole Latimer 28 Май 2017 в 02:24

Это не легко, но вы можете попытаться настроить радиальный градиент (Ultimate CSS Gradient Generator ) :

body {
  background: grey;
}

.block {
  color: white;
  text-align: center;
  font-size: 3em;
  line-height: 3em;
  margin: auto;
  margin-top: 50px;
  height: 3em;
  width: 400px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 41%,rgba(7,7,7,1) 42%,rgba(229,229,229,0) 75%);
}
<div class='block'>
  Hello World
</div>
1
itacode 28 Май 2017 в 02:22