opacity картинку - Прозрачность CSS только для цвета фона, а не текста на нем?




прозрачным сделать (10)

Могу ли я назначить свойство opacity свойства background только для div а не для текста на нем?

Я пробовал:

background: #CCC;
opacity: 0.6;

но это не изменяет непрозрачность.


Answers

Отличный способ сделать это - использовать css3.

Создайте div ширину класса - например, supersizer поверх вашей страницы:

затем задайте следующие css-свойства:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>


Самое простое решение - создать 3 divs . Один из них будет содержать другие 2, один с прозрачным фоном и один с контентом. Сделайте относительную позицию первого div и установите для него прозрачный фон отрицательному z-index , затем отрегулируйте положение содержимого, чтобы оно соответствовало прозрачному фону. Таким образом, у вас не будет проблем с абсолютным позиционированием.


Похоже, вы хотите использовать прозрачный фон, и в этом случае вы можете попробовать использовать rgba() :

rgba(R, G, B, A)

R (красный), G (зеленый) и B (синий) могут быть либо <integer> s, либо <percentage> s, где число 255 соответствует 100%. A (альфа) может быть <number> между 0 и 1 или <percentage> , где число 1 соответствует 100% (полная непрозрачность).

Пример RGBa

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

Небольшой example показывающий, как можно использовать rgba .

По состоянию на 2018 год практически каждый браузер поддерживает синтаксис rgba .


использование

background:url("location of image");//use an image with opacity

Этот метод будет работать во всех браузерах


У меня такая же проблема. Я хочу 100% прозрачный цвет фона, просто используйте этот код, он отлично работает для меня:

rgba(54, 25, 25, .00004);

Вы можете увидеть примеры с левой стороны на этой веб-странице (область контактной формы)


Вы не можете. У вас должен быть отдельный div, который является только этим фоном, так что вы можете применить к нему непрозрачность.

Я попытался сделать это недавно, и, поскольку я уже использовал jQuery, я обнаружил, что нижеследующее - это наименьшая проблема:

  1. Создайте два разных div. Они будут братьями и сестрами, не содержащимися друг в друге или что-то еще.
  2. Дайте text div сплошной цвет фона, потому что это будет по умолчанию значение JS-less.
  3. Используйте jQuery, чтобы получить высоту text div, и примените его к background div.

Я уверен, что есть какой-то способ ниндзя CSS, чтобы делать все это с помощью только плавающих или чего-то еще, но у меня не было терпения, чтобы понять это.


Мой трюк заключается в создании прозрачного .png с цветом и использованием background:url() .


Для всех, кто сталкивается с этим потоком, вот сценарий под названием thatsNotYoChild.js, который я только что написал, который автоматически решает эту проблему:

http://www.impressivewebs.com/fixing-parent-child-opacity/

В принципе, он отделяет дочерние элементы от родительского элемента, но сохраняет элемент в том же физическом местоположении на странице.


Самый простой способ сделать это - 2 divs, 1 с фоном и 1 с текстом:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>


Самый простой способ:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}




css opacity