Часть div прозрачна? - PullRequest
Новая
       1

Часть div прозрачна?

4 голосов
/ 08 декабря 2011

Можно ли сделать прозрачной только часть div, как количество пространства в div.

Например, вы выбираете 100px из верхней части div, а для верхних 100px установлена ​​непрозрачность?

Как бы я это сделал?

Ответы [ 3 ]

5 голосов
/ 08 декабря 2011

Вы можете сделать пару вещей:

  1. Попробуйте фоновое изображение, где половина прозрачна, а другая половина нет.

  2. Используйте CSS-градиент таким образом, чтобы половина была прозрачной, а другая - нет.Пример: 

    background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */

  3. Используйте несколько делений, где один имеет прозрачную BG, а другой - нет.Пример: 

    <div>
   <div id="transparent" style="background: transparent"></div>
   <div id="not-transparent" style="background: #000"></div>
</div>

Я уверен, что есть и другие пути, но это первые три, которые приходят на ум.

Удачи.

3 голосов
/ 08 декабря 2011

Либо вы создаете право background-image, используя полупрозрачный PNG (прозрачный вверху, непрозрачный внизу, например);либо вы используете два дочерних элемента, каждый из которых имеет свой собственный background-color (один из которых с прозрачной частью для rgba).

0 голосов
/ 19 декабря 2016

Вы можете использовать свойства css3 вместе с псевдоэлементами для создания этого эффекта:

Хитрость в том, чтобы нарисовать прямоугольник с :before или :after псевдоэлементом.Мы можем применить свойство background для внутреннего полупрозрачного фона.В то время как для внешнего background мы можем использовать большое значение box-shadow.

HTML: 

<div class="box"></div>

CSS: 

.box {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 250px;
}

.box:before {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1000px #000;
  position: absolute;
  height: 50px;
  width: 50px;
  content: '';
  left: 0;
  top: 0;
}


html,
body {
  height: 100%;
}

body {
  background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
  margin: 0;
}

.box {
  position: relative;
  margin: 30px 20px;
  overflow: hidden;
  height: 120px;
  width: 250px;
}

.box:before {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1000px #000;
  position: absolute;
  height: 50px;
  width: 50px;
  content: '';
  left: 0;
  top: 0;
}
<div class="box"></div>
...